Font impressionant 6: revisió completa
- 1 Com instal·lar el tipus de lletra impressionant
- Mètode 1.
- Mètode 2.
- 2 Com utilitzar les icones impressionants del tipus de lletra
- 1 icones estàndard
- 2 icones grans
- 3 icones d'amplada fixa
- 4 icones per a la llista de bala
- 5 icones i pressupostos emmarcats
- 6 icones animades
- 7 icones transformades
- 8 icones combinades
- 3 Font Awesome 4.5.0 collection, classes icss code to insert using the content property
- 4 recursos relacionats
- Mida de la icona
- Color de la icona
- Preguntes Més Freqüents
Font Awesome és una col·lecció d’icones vectorials escalables. Les icones es poden formatar mitjançant propietats CSS, configurar el seu color, mida, ombra i molt més. La versió 5.5.0 de tipus de lletra inclou 605 icones.
1 Com instal·lar el tipus de lletra impressionant
Mètode 1.
Utilitzeu la versió del fitxer Font-Aweses.css afegint el codi següent al<head> Secció:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Un cop connectat el tipus de lletra, podeu utilitzar les icones del vostre lloc.
Mètode 2.
Descarregueu el tipus de lletra de font impressionant . Desempaqueu l’arxiu i pengeu dues carpetes de l’arxiu al servidor del lloc - CSS i tipus de lletra. Si ja teniu carpetes amb aquests noms al vostre lloc, només haureu d’afegir -hi fitxers de les carpetes descarregades.
Podeu utilitzar la versió completa o minificada del fitxer:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Com utilitzar les icones impressionants del tipus de lletra
Les icones es poden afegir a una pàgina web de dues maneres: configurant les classes adequades per al<i> i<span> elements, oby adding them to the desired element using the :before, :after pseudo-elements ithe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> Li: abans {contingut: "\ f015";/ * Afegeix icona de casa */font-family: Fontawesome; color: #aaaaaa; marge-right: 10px;}1 icones estàndard
Font Awesome està dissenyat per utilitzar -lo amb elements en línia. Per afegir icones, primer heu de configurar la classe FA<i> o<span> element.
Per afegir la icona seleccionada abans o després de l'element, un buit<i></i> o<span></span> L’element s’afegeix a l’element, que se li assigna una classe d’icones, així com una classe addicional que estén l’estil.
<i class="fa fa-camera-retro"></i>2 icones grans
Per augmentar la mida d’una icona respecte al seu contenidor, utilitzeu les classes FA-LG (33% augment), 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 icones d'amplada fixa
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> Aplicacions</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Configuració</a ></li></ul>4 icones per a la llista de bala
Utilitzeu les classes FA-UL i FA-LI per substituir les bales predeterminades en un<ul>...</ul> Llista de bala.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>llista</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>llista</li> <li><i class="fa-li fa fa-square"></i>llista</li></ul>5 icones i pressupostos emmarcats
Use the fa-border class to set the border for the icon. The pull-right ipull-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, consectetur adipiscing elit. Donec Nec Purus Congue, Posuere Libero a, Porta Sapien. En el SED Elit lectus. Sed Lacus Elit, Semper Vitae Felis ID, Sodales Congue Sapien.</p>6 icones animades
Afegiu les classes FA-SPIN, FA-PULSE, FA-Refresh, FA-Cog per configurar icones de filatura. L’animació no és compatible a 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 icones transformades
Per girar o fer volar les icones, utilitzeu les classes FA-rotate-* i 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 icones combinades
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, ifa-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 icss code to insert using the content property
Icones per a aplicacions web Fa -ajust - \ f042;Fa -anchor - \ f13d;
Fa -archive - \ f187;
FA -Arrows - \ F047;
Fa -asterisc - \ f069;
Faat - \ f1fa;
FA-Balance-Escala-\ F24E;
Fa -ban - \ f05e;
FA -Bank - \ F19C;
Fa -barcode - \ f02a;
FA-BATTERY-EXPETTY-\ F244;
Fa-Battery-Half-\ F242;
Fa-Battery-Quarter-\ F243;
FA-Battery-Threat-Quarters-\ 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 girar o fer volar les icones, utilitzeu les classes FA-rotate-* i Fa-flip-*.
4 recursos relacionats
A més de la col·lecció Font Awesome, també podeu utilitzar altres tipus de lletra d’icones.
Fontello.Fontello té una gran col·lecció de tipus de lletra icones. Podeu seleccionar les icones que us agradi i descarregar -les al vostre ordinador.
Icona de la Fundació.Icona de la Fundació%%%% és una altra col·lecció Icon Font dels desenvolupadors del marc de la Fundació. A més de les icones estàndard, el lloc inclou icones rodones, icones de xarxes socials i molt més.
Icones de material.Les icones de material són les icones planes unificades de Google que encarnen la facilitat de la percepció. Les icones estan optimitzades per a una bonica pantalla a totes les plataformes comunes i per a totes les resolucions de pantalla.
La col·lecció Icon Font conté més de 750 icones. La manera més senzilla d’instal·lar una col·lecció al vostre lloc web és utilitzar icones com Google Web Fonts. Per fer -ho, el codi següent s'inclou al marcatge de la pàgina:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Per mostrar correctament el tipus de lletra en els navegadors, a l’element que utilitzarà el tipus de lletra de la icona se li dóna la classe de materials:
.Material-Icons {Font-Family: "Icones de material"; Font-Pes: estil de lletra normal: mida normal de lletra: 24px; / * Mida de la icona preferida */ visualització: en línia-bloc; Amplada: 1EM; Alçada: 1EM; Línia alçada: 1; Text-Transform: Cap; Espai de lletres: Word-Wrap normal: Normal; White-Space: Nowrap; Direcció: LTR; -WebKit-Font Smoothing: Anialiased; / * Suport per tots els navegadors WebKit */ Text-Rendering: Optimizelegibility; / * Suport de Safari i Chrome */ -Moz-Osx-Font-Smoothing: Grayscale; /* Suport de Firefox. */ Font-Feature-Settings: 'Liga'; /* És el suport. */}S'afegeixen les icones pròpies mitjançant el<I class=''material-icons''>Codi de lligadura o html de la icona</i> Etiqueta, per exemple:
<i class="material-icons">compte_balance_wallet</i><i class="material-icons"></i>La lligadura és entesa per tots els navegadors moderns, és a dir, a partir de la versió 10. El codi de la icona es genera automàticament, perquè cal fer clic amb el botó esquerre a la imatge de la icona i copiar el look suggerit.
Mida de la icona
Mida de la icona is controlled by additional classes:
.material-icons.md-18 {font-size: 18px;} /* per<i class="material-icons md-18"></i> */.material-icons.md-24 {font-size: 24px;} /* per<i class="material-icons md-24"></i> */.material-icons.md-36 {font-size: 36px;} /* per<i class="material-icons md-36"></i> */.material-icons.md-48 {font-size: 48px;} /* per<i class="material-icons md-48"></i> */Color de la icona
El color de les icones també s’estableix mitjançant classes addicionals:
.Material-Icons.Md-Dark {Color: RGBA (0, 0, 0, 0.54);} /*<i class="material-icons md-dark"></i> */.material-icons.md-light {color: rgba (255, 255, 255, 1);} /*<i class="material-icons md-light"></i> */.Material-Icons.Md-Dark.Md-inactiu {color: rgba (0, 0, 0, 0.26);} /*<i class="material-icons md-dark md-inactive"></i> * /.material-icons.md-light.md-inactiu {color: rgba (255, 255, 255, 0,3);} /*<i class="material-icons md-light md-inactive">cara</i> */Per definir un color personalitzat, heu d’afegir una classe que defineixi el color de la icona, per exemple:
.material-icons.indigo {color: #1a237e;} /*<i class="material-icons indigo"></i> */Preguntes Més Freqüents
- Què és el tipus de lletra en termes senzills?
- En essència, es tracta d’un tipus de lletra amb icones que es poden afegir a qualsevol element de pàgina web per millorar la seva visibilitat i disseny. La col·lecció consta de diversos centenars d’icones adequades per a qualsevol tasca i propòsit.Més informació sobre aquest enllaç
Michel Pinson és un entusiasta del viatge i creador de contingut. Funcionant la passió per l'educació i l'exploració, va intervenir per compartir coneixements i inspirar els altres a través de contingut educatiu captivador. Unint el món que uneix apoderant individus amb experiència global i sensació de vagabunds.
