Font Awesome 6: Recensione completa
- 1 Come installare Font Awesome
- Metodo 1.
- Metodo 2.
- 2 Come usare le icone Font Fantastiche
- 1 icone standard
- 2 icone grandi
- 3 icone di larghezza fissa
- 4 icone per elenco proiettato
- 5 icone e citazioni incorniciate
- 6 icone animate
- 7 icone trasformate
- 8 icone combinate
- 3 Font Awesome 4.5.0 collection, classes ecss code to insert using the content property
- 4 risorse correlate
- Dimensione dell'icona
- Colore icona
- Domande Frequenti
Font Awesome è una raccolta di icone vettoriali scalabili. Le icone possono essere formattate usando le proprietà CSS, impostare il loro colore, dimensioni, ombra e molto altro. FONT Versione 5.5.0 Include 605 icone.
1 Come installare Font Awesome
Metodo 1.
Utilizzare la versione del file del carattere.<head> sezione:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Una volta collegato il carattere, è possibile utilizzare le icone sul tuo sito.
Metodo 2.
Scarica il carattere da FONT ASSAGGIORE . Disimballare l'archivio e caricare due cartelle dall'archivio al server del sito - CSS e caratteri. Se hai già cartelle con tali nomi sul tuo sito, devi solo aggiungere file dalle cartelle scaricate.
È possibile utilizzare la versione completa o minimizzata del file:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Come usare le icone Font Fantastiche
Le icone possono essere aggiunte a una pagina Web in due modi: impostando le classi appropriate per il<i> e<span> elements, oby adding them to the desired element using the :before, :after pseudo-elements ethe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li: prima di {contenuto: "\ f015";/ * Aggiungi icona domestica */Font-Family: fontawesome; colore: #aaaaaa; margine-right: 10px;}1 icone standard
Font Awesome è progettato per essere utilizzato con elementi in linea. Per aggiungere icone, è necessario prima impostare la classe FA su<i> o<span> elemento.
Per aggiungere l'icona selezionata prima o dopo l'elemento, un vuoto<i></i> o<span></span> L'elemento viene aggiunto all'elemento, a cui viene assegnata una classe di icona, nonché una classe aggiuntiva che estende lo stile.
<i class="fa fa-camera-retro"></i>2 icone grandi
Per aumentare le dimensioni di un'icona rispetto al suo contenitore, utilizzare le classi FA-LG (aumento del 33%), FA-2X, FA-3X, FA-4X, FA-5X.
<i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera- retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i>3 icone di larghezza fissa
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation olists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Casa</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Biblioteca</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Applicazioni</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Impostazioni</a ></li></ul>4 icone per elenco proiettato
Usa le classi Fa-ul e FA-LI per sostituire i proiettili predefiniti in a<ul>...</ul> elenco puntato.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>elemento elenco</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>elemento elenco</li> <li><i class="fa-li fa fa-square"></i>elemento elenco</li></ul>5 icone e citazioni incorniciate
Use the fa-border class to set the border for the icon. The pull-right epull-left classes will add quotes to the text.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>Lorem ipsum dolor sit Amet, elit adipiscente consaco. Donec Nec Purus Congue, Posuere Libero in, Porta Sapien. In sed elit lectus. Sed Lacus Elit, Semper Vitae felis ID, Sodales Congue Sapien.</p>6 icone animate
Aggiungi le classi FA-SPIN, FA-Pulse, FA-Refresh, FA-COG per impostare icone rotanti. L'animazione non è supportata in IE8 - IE9.
<i class="fa fa-spinner fa-spin"></i><i class="fa fa-circle-o-notch fa-spin"></i><i class="fa fa-refresh fa -spin"></i><i class="fa fa-cog fa-spin"></i><i class="fa fa-spinner fa-pulse"></i>7 icone trasformate
Per ruotare o capovolgere le icone, utilizzare le classi di rota-* e FA-flip-*.
<i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180" ></i><i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class=" fa fa-shield fa-flip-vertical"></i>8 icone combinate
You can combine icons by overlaying one on top of the other. Use the fa-stack class for the parent icon, the fa-stack-1x class for the standard size, efa-stack-2x for the enlarged size.
<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> <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> <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> <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>3 Font Awesome 4.5.0 collection, classes ecss code to insert using the content property
Icone per applicazioni Web Fa -adjust - \ f042;Fa -anchor - \ f13d;
Fa -archive - \ f187;
Fa -arrows - \ f047;
Fa -pa -ask - \ f069;
Faat - \ f1fa;
Scala di bilanciamento Fa-\ f24E;
Fa -ban - \ f05e;
Fa -bank - \ f19c;
FA -BARCODE - \ f02a;
Fa-Battery-Empty-\ f244;
Fa-Battery-Half-\ f242;
Fa-Battery-Quarter-\ f243;
FA-Battery-Tre-Quiters-\ F241;
Fa-battery-full-\ f240;
FA -BED - \ f236;
Fa -beer - \ f0fc;
Fa -Bell - \ f0f3;
Fa-Bell-Slash-\ f1f6;
Fa -binoculars - \ f1e5;
Fa-birthday-cake-\ f1fd;
FA -Bolt - \ f0e7;
FA -bomb - \ f1e2;
Fa -book - \ f02d;
Per ruotare o capovolgere le icone, utilizzare le classi di rota-* e FA-flip-*.
4 risorse correlate
Oltre alla collezione Font Awesome, puoi usare anche altri caratteri icon.
Fontello.Fontello ha una vasta collezione di vari caratteri di icona. Puoi selezionare le icone che ti piacciono e scaricarle sul tuo computer.
Icona di fondazione.Fondazione icona è un'altra raccolta di font icon da parte degli sviluppatori del Fondazione. Oltre alle icone standard, il sito presenta icone rotonde, icone di social media e altro ancora.
icone materiali.Le icone materiali sono icone piatte unificate di Google che incarnano la facilità di percezione. Le icone sono ottimizzate per un bellissimo display su tutte le piattaforme comuni e per tutte le risoluzioni dello schermo.
La collezione di caratteri icon contiene oltre 750 icone. Il modo più semplice per installareare una raccolta sul tuo sito Web è utilizzare icone come Google Web Fonts. Per fare ciò, il seguente codice è incluso nel markup della pagina:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Per visualizzare correttamente il carattere nei browser, l'elemento che utilizzerà il carattere icona viene data la classe materiale-Icone:
.Material-Icone {Font-Family: 'Material Icons'; Font-weight: normale stile font: normale carattere: 24px; / * Dimensione dell'icona preferita */ display: blocco inline; larghezza: 1em; altezza: 1em; linea di linea: 1; Testo-transform: nessuno; Spazio di lettere: normale Word-Wrap: normale; Spazio bianco: nowrap; Direzione: LTR; -WebKit-font-Smoothing: antializzato; / * Supportato da tutti i browser WebKit */ Rendering di testo: ottimizzabilità; / * Supporto Safari e Chrome */ -Moz-Osx-font-Smoothing: Grayscale; /* Supporto Firefox. */ Font-Feature-Settings: 'Liga'; /* IE Supporto. */}Le icone stesse vengono aggiunte usando il<I class=''material-Icone''>Legatura o codice HTML dell'icona</i> Tag, per esempio:
<i class="material-Icone">Account_Balance_Wallet</i><i class="material-Icone"></i>La legatura è compresa da tutti i browser moderni, cioè a partire dalla versione 10. Il codice icona viene generato automaticamente, per questo è necessario fare clic con il pulsante sincero sull'immagine icona e copiare l'aspetto suggerito.
Dimensione dell'icona
Dimensione dell'icona is controlled by additional classes:
.Material-Icone.md-18 {Font-size: 18px;} /* per<i class="material-Icone md-18"></i> */.material-Icone.md-24 {Font-size: 24px;} /* per<i class="material-Icone md-24"></i> */.material-Icone.md-36 {Font-size: 36px;} /* per<i class="material-Icone md-36"></i> */.material-Icone.md-48 {Font-size: 48px;} /* per<i class="material-Icone md-48"></i> */Colore icona
Il colore delle icone è anche impostato utilizzando classi aggiuntive:
.material-Icone.md-dark {color: rgba (0, 0, 0, 0.54);} /*<i class="material-Icone md-dark"></i> */.material-Icone.md-light {Color: rgba (255, 255, 255, 1);} /*<i class="material-Icone md-light"></i> */.material-Icone.md-dark.md-inactive {Color: rgba (0, 0, 0, 0.26);} /*<i class="material-Icone md-dark md-inactive"></i> * /.material-Icone.md-light.md-inactive {Color: RGBA (255, 255, 255, 0.3);} /*<i class="material-Icone md-light md-inactive">viso</i> */Per impostare un colore personalizzato, è necessario aggiungere una classe che definisce il colore dell'icona, ad esempio:
.material-Icone.indigo {color: #1a237e;} /*<i class="material-Icone indigo"></i> */Domande Frequenti
- Che cosa è fantastico in termini semplici?
- In sostanza, è un carattere con icone che può essere aggiunto a qualsiasi elemento della pagina web per migliorare la sua visibilità e il suo design. La collezione è composta da diverse centinaia di icone adatte a qualsiasi compito e scopo.Maggiori informazioni su questo link
Michel Pinson è un appassionato di viaggi e un creatore di contenuti. Unendo la passione per l'educazione e l'esplorazione, è stato commesso a condividere le conoscenze e ispirare gli altri attraverso un accattivante contenuto educativo. Avvicinando il mondo a dare potere alle persone con competenza globale e un senso di voglia di viaggiare.
