Font Awesome

Se le icone incorporate in bootstrap non dovessero essere sufficienti esiste un ulteriore set open source: Font Awesome.

Il modo più semplice di incorporare font awesome è aggiungere la stringa del CDN appena dopo il link al CSS di bootstrap nella HEAD del documento HTML.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Per usare le icone di Font Awesome, basta aggiungere le classi di FA a un elemento vuoto

Anche se la documentazione di FA suggerisce di usare il tag i (italic), ancora valido in HTML5 ma sostituito da em, così:

Esempi:

Le icone di FA hanno 5 misure:

 fa-lg
 fa-2x
 fa-3x
 fa-4x
 fa-5x

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

È possibile settarle a grandezza fissa con la classe: fa-fw.


    Home
    Library
    Applications
    Settings

Home Library Applications Settings

Con le classi fa-ul e fa-li è possibile usarle al posto dei bullet di una lista.


  List icons
  can be used
  as bullets
  in lists

List icons
can be used
as bullets
in lists

Le icone possono essere ruotate o invertite con le classi: fa-rotate-* and fa-flip-*.

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

 normal

 fa-rotate-90

 fa-rotate-180

 fa-rotate-270

 fa-flip-horizontal

 fa-flip-vertical

Oppure possono essere composte:

fa-twitter on fa-square-o
fa-flag on fa-circle


  
  

fa-twitter on fa-square-o


  
  

fa-flag on fa-circle

cfr. anche http://nelsondev.blogspot.it/2014/04/awesome-icons-with-font-awesome.html

Font awesome