Bac à sable - Icônes

Font-Awesome

Font-Awesome est une icon font: une police de caractère qui permet d'afficher des icônes simplement.

Elle est implémentée depuis la version 4.1 de PHPBoost. Chaque mise à jour de Font-Awesome est implémentée dans la mise à jour suivante de PHPBoost.

Quelques exemples

Réseaux sociaux
Icône Nom Code
facebook-f \f39e
google-plus-g \f0d5
twitter \f099
hashtag \f292
Ecrans
Icône Nom Code
tv \f26c
desktop \f108
laptop \f109
tablet-alt \f3fa
mobile-alt \f3cd

Comment ça marche ?

En HTML

On utilise le nom de l'icône en tant que classe :

<i class="far fa-edit"></i> Edition

donnera l'icône "edit" suivie du texte : Edition

<a class="fa fa-globe" href="https://www.phpboost.com">PHPBoost</a>

donnera le lien précédé de l'icône "globe" : PHPBoost

Il en est de même pour tout type de balise HTML.

En CSS

Il faut définir votre classe, puis le code de votre icône en tant que contenu du ::before ou du ::after de la classe :

Code CSS :
.success { ... }
.success::before {
    content: "\f00c";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}
Code HTML :
<div class="message-helper bgc success">Ceci est un message de succès</div>
Ceci est un message de succès

En BBCode

Les icônes les plus utilisées dans PHPBoost sont déjà implémentées dans le menu bbcode. Vous pouvez les sélectionner en cliquant sur l'icône du menu:

Si l'icône que vous désirez utiliser n'apparait pas dans la liste, vous pouvez utiliser la balise [fa] comme suit:

[fa]nom de l'icône[/fa]

Par exemple, [fa]cubes[/fa] donnera l'icône:

Les variantes sont possibles en BBCode et sont expliquées dans la documentation de PHPBoost.


Les variantes

Font-Awesome propose une panoplie de variantes telles que la taille de l'icône, l'animation, la rotation, l'empilement et bien d'autres.

Leur fonctionnement est expliqué ici (anglais) : Font-Awesome/examples

<i class="fa fa-spinner fa-spin fa-2x"></i>

donnera l'icône "spinner", animée en rotation et faisant 2 fois sa taille initiale :

IcoMoon

L'application Icomoon permet d'ajouter des icônes personnalisées sous forme d'icon font à l'instar de Font-Awesome.

Ainsi, moyennant une petite astuce à la création des icônes, il sera possible de les utiliser autant en html que dans le contenu des articles via le bbcode.

Cette méthode est implémentable quelque soit la version de PHPBoost et une occurence appelée ICOBoost est implémentée depuis la version 6.0. Cette dernière est nécessaire pour afficher certaines icônes dans phpboost qui n'existent pas dans Font-Awesome.

L'application

Sur icomoon.io, cliquer sur IcoMoon App.

  • Avec le menu hamburger, choisir autant de New Empty Set que l'on souhaite (1 par catégorie d'icônes par exemple).
  • Importer les fichiers svg depuis un ordinateur avec le menu hamburger de chaque IconSet, ou avec "Add Icons From Library" pour choisir une librairie disponible sur le site.
  • Sélectionner toutes les icônes voulues (icône selectionée = entourée en orange).
  • Générer le pack d'icônes avec le bouton Generate Font F en bas à droite.
  • Avant de télécharger le pack, il faut modifier les Preferences et, à minima, remplir le champ Class Prefix avec fa- pour que le bbcode de PHPBoost soit pris en compte et que le pack bénéficie de toutes les fonctionnalités et variantes de Font-Awesome.
    Il est bien sûr conseillé de remplir les autres champs afin de personnaliser au mieux votre pack et ainsi, éviter les conflits entre différentes bibliothèques.

L'intégration du pack dans PHPBoost

Il est possible d'intégrer autant de pack que l'on veut.

  • Créer un dossier au nom du pack dans le thème utilisé.
  • Copier le fichier style.css et le dossier fonts du pack téléchargé depuis icomoon.io
  • Déclarer le fichier style.css dans le frame.tpl ou le @import.css du thème.

Exemples avec ICOBoost

Dans les préférences du pack sur icomoon, il a été choisi :

  • fa-iboost- dans le champ Class Prefix
  • .iboost dans CSS Selector/ Use a class

En HTML

<i class="fa iboost fa-iboost-email"></i>

En BBCode

[fa=iboost]iboost-phpboost[/fa]

markup
// html
<span class="fa-stack fa-2x logo-stack">
    <i class="fa iboost fa-iboost-phpboost-01 fa-stack-2x" style="color: #16a086;"></i>
    <i class="fa iboost fa-iboost-phpboost-02 fa-stack-2x" style="color: #ffc21c;"></i>
    <i class="fa iboost fa-iboost-phpboost-03 fa-stack-2x" style="color: #e45126;"></i>
    <i class="fa fa-heart fa-stack-1x faa-pulse animated" style="color: #FF0000;"></i>
</span>
// BBCode
[container class="fa-stack logo-stack fa-2x faa-pulse animated"][color=#16a086][fa=iboost,fa-stack-2x]iboost-phpboost-01[/fa][/color][color=#ffc21c][fa=iboost,fa-stack-2x]iboost-phpboost-02[/fa][/color][color=#e45126][fa=iboost,fa-stack-2x]iboost-phpboost-03[/fa][/color][color=#FF0000][fa]heart[/fa][/color][/container]