La bibliothèque Font Awesome

Description

Font Awesome est une police d'écriture qui intègre une bibliothèque d'icônes vectorielles.
Elle permet donc d'ajouter facilement des icônes sans connaissance ou manipulation graphique.
Actuellement la version 4.7 permet d'utiliser 675 icônes.
La liste complète utilisable sur PHPBoost se trouve à cette adresse ( class fa + unicode ):
http://fontawesome.io/cheatsheet/
Si vous souhaitez effectuer une recherche parmi la listes des icônes ou afficher les nouveautés de la bibliothèque, consultez cette page :
http://fontawesome.io/icons/

Mise en place de la balise

Comme cela est expliqué dans la documentation sur l'utilisation du bbcode, la balise fa est appelée via un tableau de l'éditeur bbcode :

le code bbcode sera par exemple :

CODE	RESULTAT
Code BBCODE : [fa]comment[/fa]

Pour les versions antérieures à PHPBoost 5.1, vous devez utiliser la classe fa en appliquant la balise html :

CODE	RESULTAT
Code HTML : [html]<i class="fa fa-comment"></i>[/html]

Customisation

Tailles

Vous pouvez modifier la taille de votre icône très facilement. Voici quelques exemples :

CODE	RESULTAT
Code BBCODE : [fa]cube[/fa]	normal
Code BBCODE : [fa=fa-lg]cube[/fa]	+ 33% d'agrandissement
Code BBCODE : [fa=fa-2x]cube[/fa]
Code BBCODE : [fa=fa-3x]cube[/fa]
Code BBCODE : [fa=fa-4x]cube[/fa]
Code BBCODE : [fa=fa-5x]cube[/fa]
Utilisation de la balise size Code BBCODE : [size=35][fa]cube[/fa][/size]

Pour les versions antérieures à PHPBoost 5.1 :

Exemples :

CODE	RESULTAT
Code HTML : [html]<i class="fa fa-cube fa-3x"></i>[/html]
Utilisation de la balise size : Code BBCODE : [size=35][html]<i class="fa fa-cube"></i>[/html][/size]
Utilisation du font-size : Code HTML : [html]<i class="fa fa-cube" style="font-size:60px;"></i>[/html]

Bordures et placement float

L'application d'une bordure avec l'intégration d'une icône dans votre texte nécessite l'utilisation de 2 classes : fa-border et fa-pull-left ou right.

Exemple :

Nous allons tout d'abord ajouter une bordure à notre icône :

Résultat :

Maintenant, il suffit de rajouter la classe souhaitée pour placer l'icône à gauche ou à droite de notre texte ( nous allons appliquer en plus un agrandissement pour un meilleur rendu ) :


Résultat :Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Pour les versions antérieures à PHPBoost 5.1

Couleurs

CODE	RESULTAT
Code BBCODE : [color=blue][fa=fa-2x]cube[/fa][/color]
Pour les versions antérieures à PHPBoost 5.1 : Code BBCODE : [color=blue][html]<i class="fa fa-cube fa-2x"></i>[/html][/color] ou Code HTML : [html]<i class="fa fa-cube fa-2x" style="color: blue;"></i>[/html]

Rotation

Nous allons utiliser 2 classes : fa-rotate-X ( avec X la valeur en degré de votre rotation ) et fa-flip-horizontal ou vertical.
Voici quelques exemples :

CODE	RESULTAT
Code BBCODE : [fa]bar-chart-o[/fa] Pour les versions antérieures à PHPBoost 5.1 : Code HTML : [html]<i class="fa fa-bar-chart-o"></i>[/html]
Code BBCODE : [fa=fa-rotate-90]bar-chart-o[/fa] Pour les versions antérieures à PHPBoost 5.1 : Code HTML : [html]<i class="fa fa-bar-chart-o fa-rotate-90"></i>[/html]
Code BBCODE : [fa=fa-rotate-180]bar-chart-o[/fa] Pour les versions antérieures à PHPBoost 5.1 : Code HTML : [html]<i class="fa fa-bar-chart-o fa-rotate-180"></i>[/html]
Code BBCODE : [fa=fa-rotate-270]bar-chart-o[/fa] Pour les versions antérieures à PHPBoost 5.1 : Code HTML : [html]<i class="fa fa-bar-chart-o fa-rotate-270"></i>[/html]
Code BBCODE : [fa=fa-flip-horizontal]bar-chart-o[/fa] Pour les versions antérieures à PHPBoost 5.1 : Code HTML : [html]<i class="fa fa-bar-chart-o fa-flip-horizontal"></i>[/html]
Code BBCODE : [fa=fa-flip-vertical]bar-chart-o[/fa] Pour les versions antérieures à PHPBoost 5.1 : Code HTML : [html]<i class="fa fa-bar-chart-o fa-flip-vertical"></i>[/html]

Animation

Nous allons utiliser 2 classes : fa-spin ( rotation simple ) et fa-pulse ( sensation de rotation avec un effet par pas ).
Voici quelques exemples :

CODE	RESULTAT
Code BBCODE : [fa=fa-spin]spinner[/fa] Pour les versions antérieures à PHPBoost 5.1 : Code HTML : [html]<i class="fa fa-spinner fa-spin"></i>[/html]
Code BBCODE : [fa=fa-spin]fa-refresh[/fa] Pour les versions antérieures à PHPBoost 5.1 : Code HTML : [html]<i class="fa fa-refresh fa-spin"></i>[/html]
Code BBCODE : [fa=fa-spin]cog[/fa] Pour les versions antérieures à PHPBoost 5.1 : Code HTML : [html]<i class="fa fa-cog fa-spin"></i>[/html]
Code BBCODE : [fa=fa-pulse]spinner[/fa] Pour les versions antérieures à PHPBoost 5.1 : Code HTML : [html]<i class="fa fa-spinner fa-pulse"></i>[/html]

Imbrication

Vous avez la possibilité d'imbriquer/superposer des icônes. Pour cela, vous avez à disposition 4 classes : fa-stack, fa-stack-1x, fa-stack-2x, fa-inverse.
Voici, dans l'ordre, comment procéder :

• fa-stack est la classe parente contenant les icônes imbriquées, à ce niveau vous pouvez ajouter un style général ( largeur d'icônes, couleur, etc ).
• fa-stack-2x sera appliquée à l'icône la plus grande
• fa-stack-1x sera appliquée à l'icône la plus petite
• fa-inverse ( facultatif ) sur votre dernière icône va inverser sa couleur.
  

Exemple 1 :
Nous voulons mettre le drapeau dans un cercle .
Il nous faudra dans ce cas utiliser la classe fa-inverse car nos icônes sont de la même couleur et la superposition masquera notre drapeau.

CODE	RESULTAT
Code HTML : [html]<span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse"></i> </span>[/html] Si un défaut d'alignement entre les icônes est constaté, vous pouvez appliquer un style pour recentrer vos icônes.

Autres exemples :

CODE	RESULTAT
Code HTML : [html]<span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x"></i> </span>[/html] Dans ce cas, l'ordre de déclaration des icônes est important car doit recouvrir
Code HTML : [html]<span class="fa-stack fa-lg" style="color: green;"> <i class="far fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x"></i> </span>[/html]

Ajout d'un lien

CODE	RESULTAT
Code BBCODE : [url=www.phpboost.com][fa=fa-2x]hand-o-right[/fa][/url] Pour les versions antérieures à PHPBoost 5.1 : Code BBCODE : [url=www.phpboost.com][html]<i class="fa fa-hand-o-right fa-2x"></i>[/html][/url]

Cumuler les paramètres

CODE	RESULTAT
Code BBCODE : [url=http://www.phpboost.com][color=red][fa=fab,fa-3x,fa-spin,fa-border]codepen[/fa][/color][/url] Pour les versions antérieures à PHPBoost 5.1 : Code BBCODE : [url=www.phpboost.com][html]<i class="fa fa-codepen fa-border fa-2x fa-spin" style="color: red;"></i>[/html][/url]

D'autres animations pour vos icônes fa

Si vous souhaitez aller plus loin dans l'animation de vos icônes vous pouvez utiliser la librairie complémentaire FontAwesomeAnimation que nous avons intégré dans le noyau.

Il vous suffit d'ajouter les classes CSS désirées à l'icone. Voici un exemple pour l'icone qui devient
La balise BBcode

[fa]

est compatible avec cette librairie complémentaire. L'animation s'écrira donc de la façon suivante :

[fa=faa-wrench, animated]wrench[/fa]

L'ajout des classes faa-fast ou faa-slow permet d'accelerer ou de ralentir l'animation.

Rendez-vous sur cette page http://l-lin.github.io/font-awesome-animation/ pour plus de détails et découvrir toutes les icones compatibles avec les animations.