Font Awesome 6: Full anmeldelse
- 1 Hvordan installere Font Awesome
- Metode 1.
- Metode 2.
- 2 Hvordan bruke Font Awesome Icons
- 1 Standardikoner
- 2 store ikoner
- 3 Fast breddeikoner
- 4 ikoner for Bulleted List
- 5 innrammede ikoner og sitater
- 6 animerte ikoner
- 7 transformerte ikoner
- 8 Kombinasjonsikoner
- 3 Font Awesome 4.5.0 collection, classes ogcss code to insert using the content property
- 4 Relaterte ressurser
- Ikonstørrelse
- Ikonfarge
- Ofte Stilte Spørsmål
Font Awesome er en samling av skalerbare vektorikoner. Ikoner kan formateres ved hjelp av CSS -egenskaper, angi farge, størrelse, skygge og mye mer. Font versjon 5.5.0 inkluderer 605 ikoner.
1 Hvordan installere Font Awesome
Metode 1.
Bruk Font-Awesome.css-versjonen av filen ved å legge til følgende kode i<head> seksjon:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Når skriften er tilkoblet, kan du bruke ikonene på nettstedet ditt.
Metode 2.
Last ned skriften fra Font Awesome . Pakk ut arkivet og last opp to mapper fra arkivet til nettstedserveren - CSS og skrifter. Hvis du allerede har mapper med slike navn på nettstedet ditt, trenger du bare å legge til filer fra de nedlastede mappene til dem.
Du kan bruke den fulle eller minifiserte versjonen av filen:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Hvordan bruke Font Awesome Icons
Ikoner kan legges til på en webside på to måter: ved å stille inn passende klasser for<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 {innhold: "\ F015";/ * Legg til hjemmeikon */Font-Family: Fontawesome; Color: #AAAAAA; Margin-høyre: 10px;}1 Standardikoner
Font Awesome er designet for å brukes med inline elementer. For å legge til ikoner, må du først sette FA -klassen til<i> eller<span> element.
For å legge til det valgte ikonet før eller etter elementet, et tomt<i></i> eller<span></span> Element blir lagt til elementet, som er tildelt en ikonklasse, samt en ekstra klasse som utvider stylingen.
<i class="fa fa-camera-retro"></i>2 store ikoner
For å øke størrelsen på et ikon i forhold til beholderen, bruk 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 Fast 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> applikasjoner</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Innstillinger</a ></li></ul>4 ikoner for Bulleted List
Bruk FA-ul- og FA-Li-klassene for å erstatte standardkulene i en<ul>...</ul> Bulleted List.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>listeelement</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>listeelement</li> <li><i class="fa-li fa fa-square"></i>listeelement</li></ul>5 innrammede ikoner og sitater
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 congue, posuer libero in, Porta Sapien. I sed elit lectus. Sed Lacus Elit, Semper Vitae Felis ID, Sodales Congue Sapien.</p>6 animerte ikoner
Legg til FA-spin, fa-pulse, fa-refresh, fa-cog-klasser for å sette opp spinnende ikoner. Animasjon stø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 transformerte ikoner
For å rotere eller snu ikoner, bruk fa-rotat-* 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 Kombinasjonsikoner
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 for webapplikasjoner FA -JUST - \ F042;Fa -anker - \ f13d;
FA -Archive - \ F187;
FA -Arrows - \ F047;
Fa -asterisk - \ f069;
Faat - \ f1fa;
FA-Balance-skala-\ F24E;
Fa -ban - \ f05e;
FA -Bank - \ F19C;
Fa -barcode - \ f02a;
Fa-batteri-tom-\ f244;
Fa-batteri-halvdel-\ F242;
Fa-batteri-kvartal-\ f243;
FA-batteri-tre kvartal-\ F241;
Fa-battery-full-\ f240;
FA -BED - \ F236;
Fa -øl - \ f0fc;
Fa -Bell - \ f0f3;
FA-Bell-Slash-\ F1F6;
Fa -binoculars - \ f1e5;
FA-Birthday-Cake-\ f1fd;
Fa -bolt - \ f0e7;
Fa -bombe - \ f1e2;
Fa -book - \ f02d;
For å rotere eller snu ikoner, bruk fa-rotat-* og fa-flip-* klasser.
4 Relaterte ressurser
I tillegg til Font Awesome Collection, kan du også bruke andre ikonfonter.
Fontello.Fontello har en stor samling av forskjellige ikonfonter. Du kan velge ikonene du liker og laste dem ned til datamaskinen din.
Foundation Icon.Foundation Icon er en annen ikonfont -samling fra utviklerne av Foundation Framework. I tillegg til standardikoner, har nettstedet runde ikoner, sosiale medier -ikoner og mer.
materialikoner.Materialikoner er Googles enhetlige flate ikoner som legemliggjør enkel oppfatning. Ikoner er optimalisert for vakker visning på alle vanlige plattformer og for alle skjermoppløsninger.
Icon Font Collection inneholder 750+ ikoner. Den enkleste måten å installereere en samling på nettstedet ditt er å bruke ikoner som Google Web -skrifter. For å gjøre dette er følgende kode inkludert i sidemarkeringen:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">For å vise skriften riktig i nettlesere, får elementet som vil bruke ikonfonten Material-Icons-klassen:
.Material-Icons {Font-Family: 'Materialikoner'; Fontvekt: Normal fontstil: Normal fontstørrelse: 24px; / * Foretrukket ikonstørrelse */ Display: Inline-Block; Bredde: 1EM; Høyde: 1EM; linjehøyde: 1; Teksttransform: Ingen; Letter-Pacing: Normal Word-Wrap: Normal; White-Space: Nowrap; Retning: LTR; -Webkit-Font-Mothing: Antialiased; / * Støttet av alle nettlesere */ tekst-gjengivelse: optimizelegibility; / * Safari og Chrome Support */ -Moz-OSX-Font-Moothing: Grayscale; /* Firefox -støtte. */ fontfunksjonsinnstillinger: 'Liga'; /* Dvs. støtte. */}Ikonene i seg selv blir lagt til ved hjelp av<I class=''material-ikoner''>ligatur eller HTML -kode for ikonet</i> Tag, for eksempel:
<i class="material-ikoner">konto_balanse_wallet</i><i class="material-ikoner"></i>Ligaturen forstås av alle moderne nettlesere, dvs. - starter fra versjon 10. Ikonkoden genereres automatisk, for dette må du venstre klikke på ikonbildet og kopiere det foreslåtte utseendet.
Ikonstørrelse
Ikonstørrelse is controlled by additional classes:
.material-Icons.md-18 {Font-size: 18px;} /* for<i class="material-ikoner md-18"></i> */.material-Icons.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> */Ikonfarge
Fargen på ikonene er også satt ved hjelp av flere klasser:
.material-Icons.md-Dark {Color: RGBA (0, 0, 0, 0.54);} /*<i class="material-ikoner md-dark"></i> */.materiale-ikoner.md-lys {farge: rgba (255, 255, 255, 1);} /*<i class="material-ikoner md-light"></i> */.material-ikoner.md-dark.md-inactive {color: rgba (0, 0, 0, 0,26);} /*<i class="material-ikoner md-dark md-inactive"></i> * /.material-ikoner.md-light.md-inactive {color: rgba (255, 255, 255, 0,3);} /*<i class="material-ikoner md-light md-inactive">ansikt</i> */For å angi en tilpasset farge, må du legge til en klasse som definerer fargen på ikonet, for eksempel:
.material-Icons.indigo {Color: #1A237E;} /*<i class="material-ikoner indigo"></i> */Ofte Stilte Spørsmål
- Hva er font kjempebra på enkle termer?
- I hovedsak er det en skrift med ikoner som kan legges til et hvilket som helst websideelement for å forbedre synligheten og utformingen. Samlingen består av flere hundre ikoner som er egnet for enhver oppgave og formål.Mer informasjon om denne lenken
Michel Pinson er en reiseentusiast og innholdsskaper. Han slår sammen lidenskap for utdanning og utforskning, og ble forpliktet til å dele kunnskap og inspirere andre gjennom fengslende pedagogisk innhold. Å bringe verden nærmere sammen ved å styrke individer med global ekspertise og en følelse av vandrende lyst.
