Chargement...

Bootstrap Font Awesome


Il existe une extension à BOOTSTRAP Twitter qui permet d'ajouter d'autres glyphicons. Font awesome

Font Awesome

Font awseome propose d'intégrer à votre blibliothèque plus de 369 icones.

Pour télécharger cette extension: Cliquez ici

Icones dynamiques

Avec Font awesome vous pouvez rendre vos icones dynamiques:

Exemple:
     
Code:
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>

Rotation et inversion des icones

Pour inverser une icone ou executer une rotation utilisez la classe fa-rotate-* et fa-flip-* :
  normal
  fa-rotate-90
  fa-rotate-180
  fa-rotate-270
  fa-flip-horizontal
  icon-flip-vertical
Code:
<i class="fa fa-thumbs-o-up"></i>&nbsp; normal<br>
<i class="fa fa-thumbs-o-up fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
<i class="fa fa-thumbs-o-up fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
<i class="fa fa-thumbs-o-up fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
<i class="fa fa-thumbs-o-up fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="fa fa-thumbs-o-up fa-flip-vertical"></i>&nbsp; icon-flip-vertical

Encadrement icones

Il est possible d'ajouter divers encadrements aux icones:

Exemple:



Code:
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-thumbs-o-up fa-stack-1x fa-inverse"></i>
</span>
<br>
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>



UNE QUESTION SUR L'ARTICLE?


CSSW Apprendre à créer son site web CSSW