Hvordan legge til font fantastiske ikoner i HTML & CSS?
Font Awesome Icons som er basert på CSS og mindre, er et av alternativene blant det humongøse utvalget av ikoner som kan være innebygd på nettstedet ditt. La oss utforske hvordan du legger dem til på websiden din.
Hvordan legge til font fantastiske ikoner?
Det er to måter å legge til en gratis utgave av Font Awesome Icons på HTML -websiden din som er:
Last biblioteket
Den første tilnærmingen for å legge til et Font Awesome -ikon på nettstedet ditt er å legge til Font Awesome Library i delen av HTML -filen din. For eksempel i følgende syntaks Font Awesome Library of Version 4.7.0 blir lagt til i seksjonen.
Biblioteker av andre font fantastiske versjoner er tilgjengelige online.
Få KIT -kode
Den andre tilnærmingen for å legge til et Font Awesome -ikon på websiden din, er å lage en konto på Font Awesome Official Website for å motta en kode med navnet “Kit Code”. Denne koden kan brukes når du setter inn en font Awesome på websiden din. Når du har fått settkoden, legg til lenken i SRC -attributtet til taggen ..
Når du mottar kitkode, sett den inn i stedet for "KitCode" i lenken og gå i gang. For eksempel.
Eksempel
Anta at du vil sette inn et kameraikon ved hjelp av Kit Code -tilnærmingen. For å gjøre det, bør du vurdere følgende kodebit:
Merk: Font Awesome Icons er lagt til i eller elementer.
FA -prefikset brukes til å legge til font fantastiske ikoner sammen med ikonnavnet. De nyere versjonene av Font Awesome bruker også prefikser som FAS (for solid modus) og FAR (for vanlig modus).
Produksjon
Font Awesome Camera -ikonet satt inn.
Demonstrasjonen nedenfor viser forskjellen mellom FAS og FAR -prefikser.
Produksjon
Font Awesome Bell -ikonet (solid modus og vanlig modus) med hell innebygd.
Nå som vi vet hvordan du kan sette inn et font Awesome Icon på websiden, la oss se hvordan du kan endre størrelse på Font Awesome Icons.
Endre størrelse på Font Awesome Icons
Det er totalt 13 klasser som brukes til å endre størrelsen på font fantastiske ikoner, og disse klassene er; FA-XS, FA-SM, FA-LG, FA-2X, FA-3X, FA-4X, FA-5X, FA-6X, FA-7X, FA-8X, FA-9X og FA-10X.
Eksempel
Dette eksemplet demonstrerer noen få av klassene nevnt ovenfor.
Produksjon
Font Awesome Bell -ikonet med forskjellige størrelser er satt inn på websiden.
Mer om Font Awesome Icons!
Her har vi listet opp noen få ting som kan gjøres for å font fantastiske ikoner for å forbedre brukeropplevelsen.
Animate Font Awesome Icons
Du kan animere font fantastiske ikoner ved hjelp av de under-nevnte klasser.
fa-spin: Det brukes til å rotere et ikon.
fa-puls: Det brukes også til å rotere et ikon, men med 8 trinn.
Eksempel
Dette eksemplet demonstrerer ovennevnte klasser.
Produksjon
Synkroniserings- og spinnerikonene er animert ved hjelp av FA-spin- og FA-pulsklasser.
Font Awesome Listed Icons
Du kan erstatte de vanlige kulene ved å bruke klassene FA-ul og FA-li.
Eksempel
Klassene nevnt ovenfor er demonstrert her.
- Punkt 1
- Punkt 2
- Punkt 3
Produksjon
Font Awesome listede ikoner er innebygd på HTML -websiden.
Roter og flip font fantastiske ikoner
Du kan rotere og vende Font Awesome Icons ved å bruke Fa-rotate-* og FA-flip-* Klasser.
Eksempel
Eksemplet nedenfor viser hvordan du roterer ANF Flip Font Awesome Icons.
Produksjon
Bilfonten Awesome Icon blir rotert og vendt fra forskjellige vinkler.
Stacking Font Awesome Icons
Du kan stable font fantastiske ikoner ved hjelp av følgende klasser.
fa-stack: Det brukes til ikon som blir ansett som overordnet i bunken.
fa-stack-1x: Det brukes til ikon med vanlig størrelse i stabelen.
FA-Stack-2X: Det brukes til ikon med større størrelse i stabelen
FA-invers: det brukes til å endre fargen på et ikon i bunken.
Eksempel
Dette eksemplet er en demonstrasjon av Stacked Font Awesome Icons.
Produksjon
Font Awesome Ban -ikonet stablet med suksess på Font Awesome Car Icon.
Grenser og trukket font fantastiske ikoner
Du kan legge til grenser og trekke font fantastiske ikoner ved hjelp av klasser; FA-grensen, FA-Pull-Right og FA-Pull-venstre-klasser.
Eksempel
Her er grensen og trukket ikonklasser illustrert.
Ikoner er en måte å demonstrere en handling eller et objekt visuelt. Disse anses som svært viktige i en webdesign for å få tak i brukerens oppmerksomhet. I tillegg til dette, forbedrer ikoner utseendet til et nettsted, gir enkel navigasjon og øker brukeropplevelsen. Font Awesome Icons som er basert på CSS og mindre, er et av alternativene blant det humongøse utvalget av ikoner som kan være innebygd på nettstedet ditt.
Produksjon
Et sitat ble trukket til venstre med en grense.
Konklusjon
Font Awesome Icons kan være innebygd på nettstedet ditt ved å motta en Kit -kode fra den offisielle Font Awesome -nettstedet. Det er forskjellige klasser tilgjengelig for å endre størrelse på Font Awesome Icons, dessuten kan du gjøre flere ting med disse ikonene, for eksempel animerte font fantastiske ikoner, bruk dem i stedet for vanlige kuler i en liste, rotere og vende disse ikonene osv. Dette og mye mer om Font Awesome Icons blir diskutert i denne oppskrivningen ved hjelp av passende eksempler.