Teckensnitt Awesome 6: Full Review
- 1 Hur man installerar teckensnittet fantastiskt
- Metod 1.
- Metod 2.
- 2 Hur man använder Font Awesome Icons
- 1 Standardikoner
- 2 stora ikoner
- 3 fasta breddikoner
- 4 ikoner för bulletad lista
- 5 inramade ikoner och citat
- 6 animerade ikoner
- 7 transformerade ikoner
- 8 kombinationsikoner
- 3 Font Awesome 4.5.0 collection, classes ochcss code to insert using the content property
- 4 relaterade resurser
- Ikonstorlek
- Ikonfärg
- Vanliga Frågor
Font Awesome är en samling skalbara vektorikoner. Ikoner kan formateras med CSS -egenskaper, ställa in sin färg, storlek, skugga och mycket mer. Teckensnitt version 5.5.0 innehåller 605 ikoner.
1 Hur man installerar teckensnittet fantastiskt
Metod 1.
Använd Font- Awesome.css-versionen av filen genom att lägga till följande kod till<head> sektion:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">När teckensnittet är anslutet kan du använda ikonerna på din webbplats.
Metod 2.
Ladda ner teckensnittet från Font Awesome . Packa upp arkivet och ladda upp två mappar från arkivet till webbplatsservern - CSS och teckensnitt. Om du redan har mappar med sådana namn på din webbplats, behöver du bara lägga till filer från de nedladdade mapparna till dem.
Du kan använda den fullständiga eller minifierade versionen av filen:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Hur man använder Font Awesome Icons
Ikoner kan läggas till en webbsida på två sätt: genom att ställa in lämpliga klasser för<i> och<span> elements, ellerby adding them to the desired element using the :before, :after pseudo-elements ochthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li: före {innehåll: "\ f015";/ * lägg till hemikon */font-family: fontawesome; color: #aaaaaa; margin-höger: 10px;}1 Standardikoner
Font Awesome är utformat för att användas med inline -element. För att lägga till ikoner måste du först ställa in FA -klassen till<i> eller<span> element.
För att lägga till den valda ikonen före eller efter elementet, en tom<i></i> eller<span></span> Element läggs till i elementet, som tilldelas en ikonklass, samt en ytterligare klass som utvidgar stylingen.
<i class="fa fa-camera-retro"></i>2 stora ikoner
För att öka storleken på en ikon i förhållande till behållaren använder du FA-LG (33% ökning), FA-2X, FA-3X, FA-4X, FA-5X-klasser.
<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 fasta breddikoner
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation ellerlists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Hem</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Bibliotek</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Ansökningar</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> inställningar</a ></li></ul>4 ikoner för bulletad lista
Använd FA-UL- och FA-LI-klasserna för att ersätta standardkulorna i en<ul>...</ul> Bulleted List.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>listobjekt</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>listobjekt</li> <li><i class="fa-li fa fa-square"></i>listobjekt</li></ul>5 inramade ikoner och citat
Use the fa-border class to set the border for the icon. The pull-right ochpull-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 i, Porta Sapien. I Sed Elit Lectus. SED Lacus Elit, Semper Vitae Felis ID, Sodales Congue Sapien.</p>6 animerade ikoner
Lägg till fa-spin, fa-puls, fa-refresh, fa-cog-klasser för att ställa in spinnikoner. Animering stöds inte i 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 transformerade ikoner
För att rotera eller vända ikoner, använd FA-ROTATE-* och FA-FLIP-* -klasserna.
<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 kombinationsikoner
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, ochfa-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 ochcss code to insert using the content property
Ikoner för webbapplikationer Fa -adjust - \ f042;Fa -anchor - \ f13d;
Fa -Archive - \ F187;
FA -Arrows - \ F047;
FA -ASEASTERISK - \ F069;
Faat - \ f1fa;
Fa-balance-skala-\ f24e;
Fa -Ban - \ f05e;
Fa -bank - \ f19c;
Fa -barcode - \ f02a;
Fa-battery-tomt-\ f244;
Fa-battery-half-\ f242;
Fa-battery-quarter-\ f243;
Fa-battery-tre-fjärdedelar-\ f241;
Fa-battery-full-\ f240;
FA -BED - \ F236;
Fa -Beer - \ f0fc;
Fa -bell - \ f0f3;
Fa-bell-slash-\ f1f6;
Fa -kinkylar - \ f1e5;
Fa-birthday-kaka-\ f1fd;
Fa -bult - \ f0e7;
Fa -bomb - \ f1e2;
Fa -book - \ f02d;
För att rotera eller vända ikoner, använd FA-ROTATE-* och FA-FLIP-* -klasserna.
4 relaterade resurser
Förutom teckensnittet Awesome Collection kan du också använda andra ikon -teckensnitt.
Fontello.Fontello har en stor samling av olika ikonsteckensnitt. Du kan välja ikonerna du gillar och ladda ner dem till din dator.
Foundation -ikonen.Foundation Icon är en annan ikon -teckensnittssamling från utvecklarna av Foundation Framework. Förutom standardikoner har webbplatsen runda ikoner, ikoner för sociala medier och mer.
Materialikoner.Materialikoner är Googles enhetliga platta ikoner som förkroppsligar uppfattningen. Ikoner är optimerade för vacker visning på alla vanliga plattformar och för alla skärmupplösningar.
Ikonens teckensnittskollektion innehåller 750+ ikoner. Det enklaste sättet att Installeraera en samling på din webbplats är att använda ikoner som Google Web -teckensnitt. För att göra detta ingår följande kod i sidmarkeringen:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">För att korrekt visa teckensnittet i webbläsare ges elementet som kommer att använda ikonens teckensnitt till materialet-ICONS-klassen:
.Material-ICONS {font-familj: 'Materialikoner'; Font-weight: Normal Font-Style: Normal Font-Size: 24px; / * Föredragen ikonstorlek */ Display: inline-block; bredd: 1em; Höjd: 1EM; linjehöjd: 1; Texttransform: ingen; Brevavstånd: Normal Word-WRAP: Normal; White-Space: Nowrap; Riktning: ltr; -webkit-font-smoothing: Antialiased; / * Stöds av alla WebKit-webbläsare */ Text-återgivning: Optimizelegibility; / * Safari och Chrome Support */ -Moz-Osx-Font-Smoothing: GrayScale; /* Firefox -stöd. */ font-featurure-settings: 'Liga'; /* Dvs support. */}Själva ikonerna läggs till med hjälp av<I class=''material-ikoner''>ligatur eller HTML -kod på ikonen</i> Tagg, till exempel:
<i class="material-ikoner">Account_balance_wallet</i><i class="material-ikoner"></i>Ligaturen förstås av alla moderna webbläsare, dvs från version 10. Ikonkoden genereras automatiskt, för detta måste du vänsterklicka på ikonbilden och kopiera det föreslagna utseendet.
Ikonstorlek
Ikonstorlek is controlled by additional classes:
.Material-Icons.MD-18 {font-size: 18px;} /* för<i class="material-ikoner md-18"></i> */.Material-ICONS.MD-24 {font-size: 24px;} /* för<i class="material-ikoner md-24"></i> */.Material-ICONS.MD-36 {font-size: 36px;} /* för<i class="material-ikoner md-36"></i> */.Material-ICONS.MD-48 {font-Size: 48px;} /* för<i class="material-ikoner md-48"></i> */Ikonfärg
Färgen på ikonerna ställs också in med ytterligare klasser:
.Material-ICONS.MD-DARK {Color: Rgba (0, 0, 0, 0.54);} /*<i class="material-ikoner md-dark"></i> */.Material-ICONS.MD-LIGHT {Color: RGBA (255, 255, 255, 1);} /*<i class="material-ikoner md-light"></i> */.Material-Icons.md-Dark.md-inaktiv {Färg: rgba (0, 0, 0, 0,26);} /*<i class="material-ikoner md-dark md-inactive"></i> * /.Material-Icons.md-light.md-inaktiv {färg: rgba (255, 255, 255, 0,3);} /*<i class="material-ikoner md-light md-inactive">ansikte</i> */För att ställa in en anpassad färg måste du lägga till en klass som definierar färgen på ikonen, till exempel:
.Material-Icons.indigo {Color: #1A237E;} /*<i class="material-ikoner indigo"></i> */Vanliga Frågor
- Vad är teckensnitt fantastiskt på enkla termer?
- I huvudsak är det ett teckensnitt med ikoner som kan läggas till i alla webbsideselement för att förbättra dess synlighet och design. Samlingen består av flera hundra ikoner som är lämpliga för alla uppgifter och syften.Mer information om den här länken
Michel Pinson är en reseentusiast och innehållsskapare. Sammanslagande passion för utbildning och utforskning är han kommit till att dela kunskap och inspirera andra genom att fängsla utbildningsinnehåll. Att föra världen närmare varandra genom att stärka individer med global expertis och en känsla av vandringslust.
