Come aggiungere icone Font fantastiche in HTML e CSS?
FONT Icone fantastiche basate su CSS e meno, sono una delle opzioni tra l'enorme gamma di icone che possono essere incorporate nel tuo sito web. Esploriamo come aggiungerli nella tua pagina web.
Come aggiungere icone FONT FANTASTICHE?
Esistono due modi per aggiungere un'edizione gratuita di icone Font Awesome nella tua pagina Web HTML che sono:
Carica la libreria
Il primo approccio per l'aggiunta di un'icona Font Awesome nel tuo sito Web è aggiungere la libreria Font Awesome nella sezione del tuo file HTML. Ad esempio, nella seguente sintassi la libreria Font Awesome della versione 4.7.0 viene aggiunto nella sezione.
Le biblioteche di altre versioni Font Awesome sono disponibili online.
Ottieni codice kit
Il secondo approccio per aggiungere un'icona Font Awesome nella tua pagina Web è quello di creare un account Font Awesome Ufficiale per ricevere un codice con il nome "Codice kit". Questo codice può essere utilizzato quando si inserisce un font fantastico nella tua pagina web. Una volta ottenuto il codice kit aggiungi il collegamento nell'attributo SRC del tag ..
Dopo aver ricevuto il codice kit inseriscilo al posto di "KitCode" nel collegamento e inizia. Per esempio.
Esempio
Supponiamo che tu voglia inserire un'icona della fotocamera utilizzando l'approccio del codice kit. Per fare ciò, considera il seguente frammento di codice:
Nota: FONT vengono aggiunte icone fantastiche o elementi.
Il prefisso FA viene utilizzato per aggiungere icone FONT fantastiche insieme al nome dell'icona. Le versioni più recenti di Font Awesome usano anche prefissi come FAS (per la modalità solida) e lontano (per modalità normale).
Produzione
L'icona Font Awesome Camera inserita con successo.
La dimostrazione seguente mostra la differenza tra i prefissi FAS e FAR.
Produzione
L'icona Font Awesome Bell (modalità solida e modalità normale) incorporata correttamente.
Ora che sappiamo come inserire un'icona Font Awesome sulla pagina Web, vediamo come ridimensionare le icone Font fantastiche.
Ridimension Font Icone fantastiche
Esistono un totale di 13 classi che vengono utilizzate per modificare le dimensioni delle icone fantastiche e queste classi; FA-XS, FA-SM, FA-LG, FA-2X, FA-3X, FA-4X, FA-5X, FA-6X, FA-7X, FA-8X, FA-9X e FA-10x.
Esempio
Questo esempio dimostra alcune delle classi sopra menzionate.
Produzione
L'icona Font Awesome Bell con varie dimensioni è inserita nella pagina web.
Maggiori informazioni sulle icone Font Awesome!
Qui abbiamo elencato alcune cose che possono essere fatte per fondere icone fantastiche per migliorare l'esperienza dell'utente.
Font font icone fantastiche
Puoi animare le icone fantastiche del Font usando le classi di seguito.
fa-spin: Viene utilizzato per ruotare un'icona.
Fa-Pulse: Viene anche usato per ruotare un'icona ma con 8 passaggi.
Esempio
Questo esempio dimostra le classi sopra menzionate.
Produzione
Le icone Sync-Alt e Spinner sono animate usando le classi FA-SPIN e FA-Polse.
Font Awesome Icone elencate
È possibile sostituire i proiettili ordinari usando le classi Fa-ul e Fa-li.
Esempio
Le classi sopra menzionate sono dimostrate qui.
- Articolo 1
- Articolo 2
- Articolo 3
Produzione
Le icone Font Awesome elencate sono incorporate nella pagina Web HTML.
Ruotare e capovolgere le icone fantastiche
Puoi ruotare e capovolgere le icone fantastiche utilizzando le classi di rota fa-* e fa-flip-*.
Esempio
L'esempio seguente mostra come ruotare le icone fantastiche del Flip Font.
Produzione
L'icona Font Font è in fase di ruota e lanciata da diverse angoli.
Icone fantastiche del carattere impilamento
Puoi impilare le icone Font Font usando le seguenti classi.
FA-STACK: viene utilizzato per l'icona considerata genitore nello stallo.
FA-STACK-1X: viene utilizzato per l'icona con le dimensioni regolari nello stack.
FA-STACK-2X: viene utilizzato per l'icona con le dimensioni più grandi nello stack
FA-inverso: viene utilizzato per cambiare il colore di un'icona nello stack.
Esempio
Questo esempio è una dimostrazione di icone di Font Ampressi.
Produzione
The Font Awesome Ban Icona impilato con successo sull'icona di Font Awesome Car.
Font confini e tirate icone fantastiche
Puoi aggiungere bordi e tirare le icone fantastiche del font usando le classi; Classi di Border, FA-Pull-Rull e FA-Pull-Left.
Esempio
Qui sono illustrate le lezioni di icone bordo e tirate.
Le icone sono un modo per dimostrare visivamente un'azione o un oggetto. Questi sono considerati molto importanti in un web design per attirare l'attenzione dell'utente. Oltre a questo, le icone migliorano l'aspetto di un sito Web, forniscono una facile navigazione e aumentano l'esperienza dell'utente. FONT Icone fantastiche basate su CSS e meno, sono una delle opzioni tra l'enorme gamma di icone che possono essere incorporate nel tuo sito web.
Produzione
Una citazione è stata tirata con successo a sinistra con un bordo.
Conclusione
FONT Icone fantastiche possono essere incorporate nel tuo sito Web ricevendo un codice kit dal sito Web ufficiale Font Awesome. Ci sono varie classi disponibili per ridimensionare le icone fantastiche del fondi, inoltre, puoi fare più cose con queste icone, come font font fantastici icone, usarle invece di proiettili ordinari in un elenco, ruotare e capovolgere queste icone. Questo e molto altro sulle fantastiche icone di Font sono discussi in questo articolo con l'aiuto di esempi adatti.