View Categories

Font Awesome

Hva: Ikonbibliotek

Ta i bruk: https://fontawesome.com/

Dokumentasjon: https://docs.fontawesome.com/

Formål #

Font Awesome er et ikonbibliotek — en samling av ferdiglagde ikoner som du kan bruke på nettsider eller i apper.

I stedet for å bruke bilder, får du skalerbare vektorikoner (SVG) som oppfører seg som tekst: de kan endres i størrelse, farge, skygge og tilpasses med CSS uten å miste kvalitet.

Måten vi implementerer Font Awesome på er ved hjelp av JS+SVG og auto subsetting. Det betyr at vi kan bruke shortcodes som et javascript så fanger opp og bytter ut med SVG-ikoner. 

Vi bruker også auto subsetting, som vil si at vi kan ta med alle de >63 000  ikonene til Font Awesome i ett kit, men kun laste inn de ikonene vi faktisk bruker for hver sideinnlasting - smart.

Konfigurasjon #

Du kan bruke Font Awesome sin offisielle plugin, men en mer light weight-måte å gjøre det på er å bare lage et kit og hente det inn med et skript.

  1. Logg inn på Font Awesome og Add new kit
  2. Velg hvilken som helst av Pro-stilene (du får tilgang på alle uansett)
  3. Velg Hosted by us
  4. Angi domenet (du kan angi flere, f.eks. staging og prod-miljø)
  5. Gi det et navn
  6. Når kitet er lagd går du til "Settings"
  7. Under "Technology" velger du SVG

Da er kitet klart til å brukes. Lim inn følgende script i <head> (f.eks. via MCP):

<script src="https://kit.fontawesome.com/navn_på_kit.js" crossorigin="anonymous"></script>

Slik bruker du ikonene #

For å bruke et ikon må du vite følgende:

  • Det korte klassenavnet for stilen du vil bruke (f.eks. fa-sharp)
  • Navnet på ikonet, med prefikset fa- (f.eks. fa-user)
  • Det korte klassenavnet for ikonfamilien du vil bruke (f.eks. fa-solid)

Da vil det f.eks. se sånn ut:

<i class="fa-sharp fa-solid fa-user"></i>

Her finner du alle Font Awesome-ikonene.

PS Bruk alltid HTML shortcode for å hente ikoner, ikke SVG (de blir automagisk omgjort til SVG uansett).

Men jeg vil bruke pseudo-elementer - hva gjør jeg? #

Ingen problem! Om du vil legge til ikoner ved å bruke pseudo-elementer må scriptet som skal i <head> se sånn ut:

<script data-search-pseudo-elements defer src="https://kit.fontawesome.com/navn_på_kit.js"></script>

Mer om bruk av Font Awesome og pseudo-elementer.