Font Awesome: The Complete Library Guide

Gratis ikoner skrifttype Awesome: hva det er og hva det brukes til. Slik kobler du til ikoner til nettstedet. Fordeler og ulemper ved biblioteket.

Font Awesome Ikon Set: The Ultimate Guide

Font Awesome er et sett med fonter og ikoner basert på CSS og mindre. Verktøyet lar deg raskt koble alle slags ikoner til nettstedet, og forbedre sin design og brukervennlighet betydelig. Det er nok å sette inn noen få linjer med kode.

Font Awesome gir deg skalerbare vektorikoner som du enkelt kan tilpasse - størrelse, farge, skygger og alt annet som kan gjøres med CSS.

Font Awesome Library har en enorm samling av de beste forslagene til deg. Du forbedrer prosjektet ditt med unike ikoner. Dette er faktisk et stort sett med alle slags ikoner som du kan bruke til dine egne formål.

I Fontawesome er alle ikoner helt og helt gratis. Biblioteket er lisensiert under GNU General Public License. Dette betyr at den kan brukes fritt i kommersielle prosjekter, og i prinsippet overalt.

Settet ble opprettet av Dave Gandhi. Den inneholder gratis sosiale medier ikoner, ikoner for å forbedre brukergrensesnittet, og mer.

Vanligvis brukes font Awesome Font-skript i forbindelse med Bootstrap og Bootstrapcdn. Font Awesome er andre bare til Google Fonter i popularitet.

Hvordan det fungerer

Hovedfunksjonen er at alle font-fantastiske ikoner ikke er statiske bilder. De er i skriftformat. Med andre ord, disse er ikonfonter. For eksempel er et søkikon eller et sosialt nettverkslogo det samme som de enkle tegnene A, B, C.

FONT AWESOME ICONS er opprettet ved hjelp av skalerbare vektorer. Derfor kan de økes til nesten alle størrelser.

Alle tilgjengelige ikoner er inkludert i en skriftfil. Alt du trenger er å laste ned denne filen fra det offisielle nettstedet og koble det i stiler.

Hvorfor designere velger skrifttype Awesome

FONT AWESOME har en rekke fordeler:

• Rask tilkobling. Du trenger bare å laste ned en spesiell fil fra den offisielle nettsiden og koble den ved å angi banen til den i CSS-koden.
• Fleksibilitet og skalerbarhet. Ikonene kan forstørres til en hvilken som helst størrelse. Symbolene vil være så klare som enheten tillater det. I en alder av responsiv design er dette viktig. Forresten, av samme grunn, skrifttype Awesome Ikoner er egnet for retina-skjermer.
• Stylisering. Ikoner kan enkelt endres i farge, størrelse, skygge eller andre eksterne parametere. Designeren får alle fordelene med styling vanlig tekst. Du kan også rotere ikonene. For eksempel, vis opp og ned eller roter 90 grader.
• Rask lasting av nettstedet. Alle ikoner er inkludert i en skriftfil. Så det tar bare en HTTP-forespørsel om å laste skrifttype Awesome. Dette er flott for nettstedets ytelse.
• Kjærlighet til nettlesere. Font Awesome er et kryss-nettleserverktøy. Du trenger ikke å bekymre deg for nettleserkompatibilitet av fonter og ikoner. De er godt støttet av dem alle. Selv gamle IE8.
• Kompatibel med forskjellige rammer. Biblioteket ble opprettet primært for bootstrap. Det vil imidlertid fungere godt med andre rammer også.
• Flere formater. Verktøyet er tilgjengelig i. Ett, .TTF, .Woff og SVG formater. Så skrifttype er håndtert på samme måte som andre webfonter.
• Ingen JavaScript kreves. Font Awesome krever ikke JavaScript å kjøre.

Dermed er Font Awesome et effektivt og praktisk verktøy som betydelig sparer layout tid og øker nettstedet ditt.

Ulemper med skrifttype Awesome

Verktøyet har også ulemper. Heldigvis er det ikke mange av dem.

Først kan ikonene bare males i en farge. Imidlertid kan denne begrensningen omgås. For eksempel, kombinere gratis ikoner med hverandre. Eller ved hjelp av CSS-effekter

For det andre inneholder Font Awesome-biblioteket for mange ikoner, og de er alle inkludert i en fil. Hvis en designer eller layoutdesigner bare trenger å koble et par ikoner, må de fortsatt laste hele biblioteket helt. Og disse er hundretusener av ekstra ikoner som vil ta opp plass. Det er imidlertid en løsning her også - å lage din egen forsamling, som bare inkluderer de nødvendige ikonene.

Font Awesome versjoner: 5 og 6

Font Awesome 5 ble utgitt 7. desember 2017 og opprinnelig inneholdt 1278 ikoner. Den femte versjonen kommer i to pakker: Gratis (Font Awesome Free) og Betalt (Font Awesome Pro). Den frie planen inneholder også ikoner fra alle fjerde versjoner. Ikonene er tilgjengelige under SIL Open Font License 1.1, Creative Commons Attribution 4.0 og MIT.

Font Awesome 6 er en ny versjon som ble utgitt i andre halvdel av 2020. Den inneholder nye ikoner og er bare tilgjengelig i en betalt plan.

Font Awesome 6 Alpha er også på vei i 2021. Dette er en annen ny generasjon ikonbibliotek. I tillegg til de nye ikonene, legger versjon 6 Alpha også nye stiler, nye tjenester og hjelpemidler. Brukere kan forhåndsbestille.

Gratis og betalte planer: Forskjeller og funksjoner

Du kan laste ned ikoner for gratis eller betalt tariffplan.

Den frie planen inneholder over 1600 ikoner og 1 sett. Et sett er en samling ikoner, stiler og innstillinger som lar deg raskt gjøre endringer uten å legge til kode.

Betalt tariff:

• Inkluderer over 7800 ikoner og 20 sett.
• Gir tilgang til Font Awesome Pro. Dette betyr at ikonene kan brukes i innfødte mobilapplikasjoner og på datamaskinen din (for eksempel i et tekstredigeringsprogram eller når du lager en presentasjon i PowerPoint).
• Lar deg laste opp dine egne ikoner. Du kan bruke dine egne ikoner sammen med eller i stedet for de offisielle skrifttype, fantastiske ikonene. For eksempel er dette hvordan du kan laste opp en bedriftslogo. Du kan utføre de samme handlingene med dine egne ikoner som med de grunnleggende - endre stil, størrelse, farge, etc.

Begge versjonene er evigvarende. Det er, de er gitt en gang for alle.

Måter å koble til Font Awesome

Først og fremst må du gå til den offisielle nettsiden og laste ned biblioteket. Det nedlastede arkivet må være pakket ut og CSS og FONTS-mappene kopieres til nettstedet ditt.

Deretter er banen til biblioteksfilen spesifisert mellom hodetikettene. For eksempel:

Slik viser du  Font Awesome ikoner   på et nettsted. Mest populære metoder:

1. Bruk av HTML.

Den enkleste måten.

Du må gå til galleriet på den offisielle nettsiden (fontawesome.com/icons?d=gallery) og velg ikonet du liker. Hvert ikon har en personlig kode, for eksempel:. Det er nok å kopiere og lime det på riktig sted i koden.

2. Via CSS.

For å gjøre dette, bruk pseudo-elementene etter eller før, samt unicode av det nødvendige ikonet. Du kan ta alt i samme galleri. Et eksempel på en slik kode: F209.

Et eksempel på en stilfiloppføring:

DIV :: Etter {display: blokk; Innhold: 'F209'; Font-Family: 'Font Awesome 5 GRATIS';}

Til slutt: Alle skrifttype Awesome Ikoner

Dermed er Font Awesome en rask og praktisk måte å legge til gratis ikoner på nettstedet ditt. Alle ikoner er lett skalerbare og ikke sakte nedover nettstedet.