Font Awesome 6: Fuld anmeldelse
- 1 Sådan installeres font Awesome
- Metode 1.
- Metode 2.
- 2 Sådan bruges font Awesome Icons
- 1 standardikoner
- 2 store ikoner
- 3 Faste breddeikoner
- 4 ikoner til listen over Bulleted
- 5 indrammede ikoner og citater
- 6 animerede ikoner
- 7 transformerede ikoner
- 8 kombinationsikoner
- 3 Font Awesome 4.5.0 collection, classes ogcss code to insert using the content property
- 4 relaterede ressourcer
- Ikonstørrelse
- Ikonfarve
- Ofte Stillede Spørgsmål
Font Awesome er en samling af skalerbare vektorikoner. Ikoner kan formateres ved hjælp af CSS -egenskaber, indstille deres farve, størrelse, skygge og meget mere. Font version 5.5.0 inkluderer 605 ikoner.
1 Sådan installeres font Awesome
Metode 1.
Brug font-awesome.css-versionen af filen ved at tilføje følgende kode til<head> afsnit:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Når skrifttypen er tilsluttet, kan du bruge ikonerne på dit websted.
Metode 2.
Download skrifttypen fra font awesome . Udpak arkivet og upload to mapper fra arkivet til webstedsserveren - CSS og skrifttyper. Hvis du allerede har mapper med sådanne navne på dit websted, skal du bare tilføje filer fra de downloadede mapper til dem.
Du kan bruge den fulde eller minificerede version af filen:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Sådan bruges font Awesome Icons
Ikoner kan føjes til en webside på to måder: ved at indstille de relevante klasser til<i> og<span> elements, ellerby adding them to the desired element using the :before, :after pseudo-elements ogthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li: før {indhold: "\ f015";/ * Tilføj hjemmekon */font-familie: fontawesome; farve: #aaaaa; margin-højre: 10px;}1 standardikoner
Font Awesome er designet til at blive brugt med inline -elementer. For at tilføje ikoner skal du først indstille FA -klassen til<i> eller<span> element.
For at tilføje det valgte ikon før eller efter elementet, en tom<i></i> eller<span></span> Element føjes til elementet, der tildeles en ikonklasse, samt en yderligere klasse, der udvider stylingen.
<i class="fa fa-camera-retro"></i>2 store ikoner
For at øge størrelsen på et ikon i forhold til dets beholder skal du bruge FA-LG (33% stigning), 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 Faste breddeikoner
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> Hjem</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> Applikationer</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Indstillinger</a ></li></ul>4 ikoner til listen over Bulleted
Brug klasser FA-ul og FA-LI til at erstatte standardkuglerne i en<ul>...</ul> Bullet list.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Listeartikel</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Listeartikel</li> <li><i class="fa-li fa fa-square"></i>Listeartikel</li></ul>5 indrammede ikoner og citater
Use the fa-border class to set the border for the icon. The pull-right ogpull-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 Conue, Posuere Libero i, Porta Sapien. I SED Elit Lectus. Sed Lacus Elit, Semper Vitae Felis ID, Sodales Conue Sapien.</p>6 animerede ikoner
Tilføj FA-spin, FA-puls, FA-Refresh, FA-COG-klasser for at indstille roterende ikoner. Animation understøttes ikke 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 transformerede ikoner
For at rotere eller vende ikoner skal du bruge FA-roteret-* og FA-flip-* klasser.
<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, ogfa-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 ogcss code to insert using the content property
Ikoner til webapplikationer Fa -justering - \ F042;Fa -ankor - \ f13d;
Fa -Archive - \ F187;
FA -Arrows - \ F047;
Fa -strandisk - \ f069;
Faat - \ f1fa;
Fa-balance-skala-\ f24e;
Fa -ban - \ f05e;
FA -BANK - \ F19C;
Fa -barcode - \ f02a;
Fa-battery-tom-\ f244;
Fa-battery-halvdel-\ f242;
Fa-battery-quarter-\ f243;
Fa-battery-tre-kvartaler-\ f241;
Fa-battery-fuld-\ 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 -bog - \ f02d;
For at rotere eller vende ikoner skal du bruge FA-roteret-* og FA-flip-* klasser.
4 relaterede ressourcer
Ud over Font Awesome Collection kan du også bruge andre ikonskrifter.
Fontello.Fontello har en stor samling af forskellige ikonfonte. Du kan vælge de ikoner, du kan lide, og downloade dem til din computer.
Foundation Icon.Foundation Icon er en anden ICON -fontkollektion fra udviklerne af Foundation Framework. Foruden standardikoner har webstedet runde ikoner, sociale medieikoner og mere.
materielle ikoner.Materielle ikoner er Googles samlede flade ikoner, der legemliggør let opfattelse. Ikoner er optimeret til smuk visning på alle almindelige platforme og til alle skærmopløsninger.
Icon Font Collection indeholder 750+ ikoner. Den nemmeste måde at installereere en samling på dit websted er at bruge ikoner som Google Web -skrifttyper. For at gøre dette er følgende kode inkluderet i side -markeringen:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">For korrekt at vise skrifttypen i browsere får det element, der vil bruge ikonfontten, materialet-ICONS-klassen:
.materiale-Icons {font-family: 'Materielle ikoner'; Font-vægt: normal font-stil: normal fontstørrelse: 24px; / * Foretrukket ikonstørrelse */ display: inline-blok; bredde: 1em; Højde: 1EM; Liniehøjde: 1; Tekst-transform: Ingen; Letterafstand: Normal ordindpakning: Normal; White-Space: NowRap; Retning: LTR; -webkit-font-smoothing: antialiased; / * Understøttet af alle WebKit-browsere */ tekst-gengivelse: optimeringsløb / * Safari og Chrome support */ -moz-OSX-font-smoothing: Grayscale; /* Firefox support. */ font-feature-indstillinger: 'Liga'; /* Dvs. support. */}Ikonerne tilføjes ved hjælp af<I class=''material-ikoner''>ligatur eller HTML -kode for ikonet</i> Tag, for eksempel:
<i class="material-ikoner">Account_balance_wallet</i><i class="material-ikoner"></i>Ligaturen forstås af alle moderne browsere, dvs. start fra version 10. IKON -koden genereres automatisk, for dette har du brug for at venstre klik på ikonbilledet og kopiere det foreslåede look.
Ikonstørrelse
Ikonstørrelse is controlled by additional classes:
.materiale-ikoner.md-18 {font-size: 18px;} /* til<i class="material-ikoner md-18"></i> */.materiale-ikoner.md-24 {font-size: 24px;} /* for<i class="material-ikoner md-24"></i> */.materiale-ikoner.md-36 {font-size: 36px;} /* for<i class="material-ikoner md-36"></i> */.materiale-ikoner.md-48 {font-size: 48px;} /* for<i class="material-ikoner md-48"></i> */Ikonfarve
Farven på ikonerne er også indstillet ved hjælp af yderligere klasser:
.materiale-Icons.md-Dark {farve: RGBA (0, 0, 0, 0,54);} /*<i class="material-ikoner md-dark"></i> */.materiale-ikoner.md-lys {farve: RGBA (255, 255, 255, 1);} /*<i class="material-ikoner md-light"></i> */.materiale-ikoner.md-dark.md-inactive {farve: rgba (0, 0, 0, 0,26);} /*<i class="material-ikoner md-dark md-inactive"></i> * /.materiale-ikoner.md-light.md-inactive {farve: RGBA (255, 255, 255, 0,3);} /*<i class="material-ikoner md-light md-inactive">ansigt</i> */For at indstille en brugerdefineret farve skal du tilføje en klasse, der for eksempel definerer farven på ikonet:
.materiale-ikoner.indigo {farve: #1A237E;} /*<i class="material-ikoner indigo"></i> */Ofte Stillede Spørgsmål
- Hvad er font awesome på enkle termer?
- I det væsentlige er det en skrifttype med ikoner, der kan føjes til ethvert websideelement for at forbedre dets synlighed og design. Samlingen består af flere hundrede ikoner, der er egnede til enhver opgave og formål.Mere information om dette link
Michel Pinson er en rejseentusiast og indholdsskaber. Han fusionerede lidenskab for uddannelse og efterforskning, og blev indgået at dele viden og inspirere andre gennem fængslende uddannelsesindhold. At bringe verden tættere sammen ved at styrke individer med global ekspertise og en følelse af vandrende.
