Sådan tilføjes font-fantastiske ikoner til dine knapper

Font Awesome er et praktisk bibliotek med ikoner. Disse ikoner kan være vektorgrafik gemt i .svgfilformat eller webskrifttyper.

Disse ikoner behandles ligesom skrifttyper. Du kan angive deres størrelse ved hjælp af pixels, og de antager skriftstørrelsen for deres overordnede HTML-elementer.

Grundlæggende brug

For at inkludere Font Awesome i din app eller side skal du blot tilføje følgende kode til elementet øverst i din HTML:

Det ielement blev oprindeligt brugt til at lave andre elementer kursiv, men er nu almindeligt anvendt til ikoner. Du kan tilføje Font Awesome-klasser til ielementet for at gøre det til et ikon, for eksempel:

Bemærk, at spanelementet også er acceptabelt til brug med ikoner.

Sådan tilføjer du et ikon:

Dette giver et simpelt tommelfingerikon:

Og sådan skal du indsætte ikonet på en knap:

 Like 

Bemærk, at der er to dele ved at bruge et ikon, stilpræfikset og ikonnavnet . I eksemplet ovenfor er den stil præfiks og ikon navn er fasog fa-thumbs-uphhv.

Font Awesome tilbyder følgende stilpræfikser:

Stil Stilpræfiks Plan Type
Solid fas Ledig
Fast far Pro
Lys fal Pro
Duotone fad Pro
Mærker fab Ledig

Brandikoner indsendes ofte af virksomheden selv og er nyttige til opbygning af ting som knapper til social godkendelse eller betaling. Disse ikoner inkluderer Twitter, Facebook, Spotify, Apple og endda freeCodeCamp:

Mens du kun har adgang til solide og brandikoner under den gratis plan, er der stadig mange måder at style dem på.

Styling Font Awesome ikoner

Til enkle applikationer kan du bruge indbyggede stilarter:

Til dimensionering kan du også bruge Font Awesome's indbyggede nøgleord:

En vigtig ting at huske er, at FA-ikoner arver font-sizeaf forældercontaineren. Dette betyder, at ikonerne skaleres med enhver tekst, der kan bruges sammen med dem, hvilket holder designet konsistent.

Sig for eksempel, at du vil oprette flere knapper. Standardstørrelsen for knapperne er ret lille, så du skriver noget CSS for at øge størrelsen på knapperne sammen med teksten og ikonerne i dem:

 Like    Dislike    Share 
button { font-size: 1.5em; margin: 5px; }

Du kan også justere størrelsen på et ikon direkte ved at målrette mod selve ikonet og justere dets font-size.

Font Awesome er godt, fantastisk! Som de mest populære ikonværktøjssæt er det nemt at inkludere og bruge i alle dine projekter. Gå nu på ikonet op alle tingene.

Mere information

  • Font Awesome docs
  • Alle tilgængelige Font Awesome ikoner