VI. Tutoriels

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 :

bbcode_balises_fa


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 :

Code BBCODE :
[fa=fa-border]cogs[/fa]

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 ) :
Code BBCODE :
[fa=fa-3x,fa-border,fa-pull-left]cogs[/fa]


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

Code HTML :
[html]<i class="fa fa-cogs fa-3x fa-pull-left fa-border"></i>votre texte[/html]


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.
Cette page a été vue 4299 fois