Font Awesome 6: Volledige recensie
- 1 Hoe het lettertype te installeren geweldig
- Methode 1.
- Methode 2.
- 2 Hoe u lettertype geweldige pictogrammen kunt gebruiken
- 1 standaardpictogrammen
- 2 grote pictogrammen
- 3 pictogrammen met vaste breedte
- 4 pictogrammen voor opsommingstekens
- 5 ingelijste pictogrammen en citaten
- 6 geanimeerde iconen
- 7 getransformeerde pictogrammen
- 8 combinatiepictogrammen
- 3 Font Awesome 4.5.0 collection, classes encss code to insert using the content property
- 4 Gerelateerde bronnen
- Pictogramformaat
- Pictogramkleur
- Veelgestelde Vragen
Font Awesome is een verzameling schaalbare vectorpictogrammen. Pictogrammen kunnen worden opgemaakt met behulp van CSS -eigenschappen, hun kleur, grootte, schaduw en nog veel meer instellen. Lettertype versie 5.5.0 bevat 605 pictogrammen.
1 Hoe het lettertype te installeren geweldig
Methode 1.
Gebruik de versie van het bestand<head> sectie:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Nadat het lettertype is aangesloten, kunt u de pictogrammen op uw site gebruiken.
Methode 2.
Download het lettertype van font Awesome . Pak het archief uit en upload twee mappen van het archief naar de siteserver - CSS en lettertypen. Als u al mappen hebt met dergelijke namen op uw site, hoeft u alleen bestanden van de gedownloade mappen aan hen toe te voegen.
U kunt de volledige of geminificeerde versie van het bestand gebruiken:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Hoe u lettertype geweldige pictogrammen kunt gebruiken
Pictogrammen kunnen op twee manieren aan een webpagina worden toegevoegd: door de juiste klassen in te stellen voor de<i> en<span> elements, ofby adding them to the desired element using the :before, :after pseudo-elements enthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li: vóór {content: "\ f015";/ * Huis icon toevoegen */font-family: fontawesome; color: #aaaaaaa; marge-right: 10px;}1 standaardpictogrammen
Font Awesome is ontworpen om te worden gebruikt met inline -elementen. Om pictogrammen toe te voegen, moet u eerst de FA -klasse instellen op de<i> of<span> element.
Om het geselecteerde pictogram voor of na het element toe te voegen, een leeg<i></i> of<span></span> Element wordt toegevoegd aan het element, dat een pictogramklasse is toegewezen, evenals een extra klasse die de styling uitbreidt.
<i class="fa fa-camera-retro"></i>2 grote pictogrammen
Gebruik de FA-LG (33% toename), FA-2X, FA-3X, FA-4X, FA-5X-klassen om de grootte van een pictogram ten opzichte van de container te vergroten.
<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 pictogrammen met vaste breedte
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation oflists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Huis</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Bibliotheek</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Toepassingen</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Instellingen</a ></li></ul>4 pictogrammen voor opsommingstekens
Gebruik de FA-UL- en FA-LI-klassen om de standaard kogels in een<ul>…</ul> Bulleted List.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Maak een lijst van item</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Maak een lijst van item</li> <li><i class="fa-li fa fa-square"></i>Maak een lijst van item</li></ul>5 ingelijste pictogrammen en citaten
Use the fa-border class to set the border for the icon. The pull-right enpull-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 in, Porta Sapien. In Sed Elit Lectus. SED Lacus Elit, Semper Vitae Felis ID, Sodales Congues Sapien.</p>6 geanimeerde iconen
Voeg de FA-spin, FA-Pulse, FA-Refresh, FA-Cog-klassen toe om draaiende pictogrammen in te stellen. Animatie wordt niet ondersteund 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 getransformeerde pictogrammen
Gebruik de FA-Rotate-* en FA-FLIP-* klassen om pictogrammen te roteren of om te draaien.
<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 combinatiepictogrammen
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, enfa-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 encss code to insert using the content property
Pictogrammen voor webtoepassingen FA -adjust - \ F042;Fa -ankor - \ f13d;
FA -Archive - \ F187;
FA -Arrows - \ F047;
Fa -asterisk - \ f069;
FAAT - \ f1fa;
FA-BALANCE-schaal-\ F24E;
Fa -ban - \ f05e;
FA -bank - \ F19C;
FA -BARCODE - \ F02A;
Fa-Battery-Empty-\ F244;
Fa-battery-half-\ f242;
Fa-Battery-Quarter-\ F243;
Fa-Battery-Three-Quarters-\ F241;
Fa-battery-full-\ f240;
FA -bed - \ F236;
Fa -Beer - \ f0fc;
Fa -Bell - \ f0f3;
Fa-Bell-Slash-\ f1f6;
Fa -binocuals - \ f1e5;
Fa-Birthday-Cake-\ f1fd;
FA -Bolt - \ f0e7;
Fa -Bomb - \ f1e2;
Fa -book - \ f02d;
Gebruik de FA-Rotate-* en FA-FLIP-* klassen om pictogrammen te roteren of om te draaien.
4 Gerelateerde bronnen
Naast de Lettertype Awesome Collection, kunt u ook andere pictogramlettertypen gebruiken.
Fontello.Fontello heeft een grote verzameling van verschillende pictogramlettertypen. U kunt de pictogrammen selecteren die u leuk vindt en ze naar uw computer downloaden.
Foundation -pictogram.Foundation Icon is een andere pictogramlettertype -collectie van de ontwikkelaars van het Foundation Framework. Naast standaardpictogrammen bevat de site ronde pictogrammen, sociale media -pictogrammen en meer.
materiële pictogrammen.Materiële pictogrammen zijn de verenigde platte pictogrammen van Google die gemak van perceptie belichamen. Pictogrammen zijn geoptimaliseerd voor een prachtig display op alle gemeenschappelijke platforms en voor alle schermresoluties.
De pictogramlettertype -collectie bevat 750+ pictogrammen. De eenvoudigste manier om een verzameling op uw website te installereneren, is door pictogrammen zoals Google Web -lettertypen te gebruiken. Om dit te doen, is de volgende code opgenomen in de pagina -opmaak:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Om het lettertype in browsers correct weer te geven, krijgt het element dat het pictogramlettertype zal gebruiken de klasse Materiaal-ICONS:
.Material-pictogrammen {font-family: 'Material Icons'; Lettertype-gewicht: normaal lettertype-stijl: normaal lettergrootte: 24px; / * Voorkeur pictogramgrootte */ display: inline-blok; Breedte: 1EM; Hoogte: 1EM; Lijn-hoog: 1; Tekst-transformatie: geen; Letter-spacing: normaal woord-wrap: normaal; White-Space: Nowrap; richting: LTR; -Webkit-font-smoothing: antialiased; / * Ondersteund door alle WebKit-browsers */ TEKST-LENTING: Optimizelegibiliteit; / * Safari en Chrome Support */ -moz-oSX-Font-Smoothing: Grayscale; /* Firefox -ondersteuning. */ Font-Feature-Settings: 'Liga'; /* Dwz ondersteuning. */}De pictogrammen zelf worden toegevoegd met behulp van de<I class=''material-pictogrammen''>ligatuur of html -code van het pictogram</i> Tag, bijvoorbeeld:
<i class="material-pictogrammen">Account_balance_wallet</i><i class="material-pictogrammen"></i>De ligatuur wordt begrepen door alle moderne browsers, dat wil zeggen - beginnend bij versie 10. De pictogramcode wordt automatisch gegenereerd, hiervoor moet u met de linkerklik op de pictogramafbeelding klikken en de voorgestelde look kopiëren.
Pictogramformaat
Pictogramformaat is controlled by additional classes:
.Material-pictogrammen.md-18 {font-size: 18px;} /* voor<i class="material-pictogrammen md-18"></i> */.Material-pictogrammen.md-24 {font-size: 24px;} /* voor<i class="material-pictogrammen md-24"></i> */.Material-pictogrammen.md-36 {font-size: 36px;} /* voor<i class="material-pictogrammen md-36"></i> */.Material-pictogrammen.md-48 {font-size: 48px;} /* voor<i class="material-pictogrammen md-48"></i> */Pictogramkleur
De kleur van de pictogrammen wordt ook ingesteld met behulp van extra klassen:
.Material-pictogrammen.md-dark {color: rgba (0, 0, 0, 0.54);} /*<i class="material-pictogrammen md-dark"></i> */.Material-pictogrammen.md-Light {color: rgba (255, 255, 255, 1);} /*<i class="material-pictogrammen md-light"></i> */.Material-pictogrammen.md-dark.md-inactive {color: rgba (0, 0, 0, 0.26);} /*<i class="material-pictogrammen md-dark md-inactive"></i> * /.Material-pictogrammen.md-light.md-Inactive {color: rgba (255, 255, 255, 0.3);} /*<i class="material-pictogrammen md-light md-inactive">gezicht</i> */Om een aangepaste kleur in te stellen, moet u een klasse toevoegen die de kleur van het pictogram definieert, bijvoorbeeld:
.Material-pictogrammen.Indigo {color: #1a237e;} /*<i class="material-pictogrammen indigo"></i> */Veelgestelde Vragen
- Wat is het lettertype geweldig in eenvoudige bewoordingen?
- In wezen is het een lettertype met pictogrammen die kunnen worden toegevoegd aan elk webpagina -element om de zichtbaarheid en het ontwerp ervan te verbeteren. De collectie bestaat uit enkele honderden pictogrammen die geschikt zijn voor elke taak en doel.Meer informatie over deze link
Michel Pinson is een reisliefhebber en content maker. Hij samenvoegt voor onderwijs en verkenning, heeft hij zich opgesproken om kennis te delen en anderen te inspireren door boeiende educatieve inhoud. De wereld dichter bij elkaar brengen door individuen te versterken met wereldwijde expertise en een gevoel van reislust.
