Font Awesome Review – Hva er det? Er det bra? Og hvordan bruker jeg det med WordPress?

WordPress-tilbud


Hvis du leter etter en anmeldelse av Font Awesome i en enkelt setning, er det her: ‘Det er fint … og funksjonelt … og slags strålende i sin enkle enkelhet.’ Dette oppsummerer i utgangspunktet min aller første opplevelse med denne ganske fantastiske verktøysettet.

Den opplevelsen var imidlertid for en stund siden. En tid ble jeg hekta. Jeg brukte det til en haug med ting, og det fikk innholdet mitt til å poppe, men som ofte er tilfelle, begynte den første spenningen å slite.

Men la oss holde på med det for nå, og i stedet starte denne Font Awesome-gjennomgangen – hvor vi vil dekke hva Font Awesome er, om det er noe bra eller ikke, og kanskje viktigst av alt, hvordan du bruker det med WordPress – fra begynnelse.

Hva er Font Awesome?

Font Awesome anmeldelse

I et nøtteskall, Font Awesome er en ikonfont.

Tenk vanlig skrift, men i stedet for bokstaver får du ikoner.

Dette er den virkelig geniale og spillendrende delen av det hele.

Ikoner var en gang en stor smerte når jeg bygde et nettsted. Du kunne sjelden finne de riktige – spesielt hvis du trengte mer enn et par av dem for å være i samme stil. (Ti ikoner med jevn design? Glem det!) Og selv om du fant dem på en eller annen måte, var kvaliteten ikke på nivå hvis du ville bruke ikonene i forskjellige størrelser. Lang historie kort, for å få de rette ikonene, trengte du å designe dem selv.

Over tid forbedret ting seg litt, med forskjellige ikonpakker som spirer opp her og der (markedsplasser, små nettsteder). Men det var fremdeles ikke helt perfekt. Selv med disse nettstedene, måtte du fortsatt gå ut og lete etter ikoner på egen hånd, i stedet for å ha et slags lett tilgjengelig bibliotek.

Det er her Font Awesome spiller inn.

Når du kobler til nettstedet ditt til Font Awesome, kan du få tilgang til hvert ikon via en enkel HTML-kode. For å få dette kule ikonet:

bilikon

… alt jeg trenger å gjøre er å bruke et stykke kode som dette:

Font Awesome tar den og konverterer den til et liveikon. Og du kan virkelig tilpasse disse ikonene også. Du kan endre størrelser, farger og nyanser – i utgangspunktet kan du gjøre alt som er oppnåelig gjennom CSS. Så vidt du vet, oppfører disse ikonene seg akkurat som alle andre skrifter.

Font Awesome gir deg også noen unike ting, for eksempel muligheten til å animere ikonene dine. Så i stedet for en statisk versjon som denne:

statisk ikon

… du kan få noe slikt:

ikon spinn

Og dette kan gjøres med alle Font Awesome-ikoner.

Derfor er spørsmålet:

Er det bra?

Etter min mening er hovedstyrken til Font Awesome:

  • biblioteket er virkelig stort, og har for tiden mer enn 630 ikoner
  • hvert ikon er lett tilgjengelig når du har integrert nettstedet ditt med hovedbiblioteket
  • alt er vektorer, slik at du kan gjøre hva du måtte ønske med måten ikonene vises på
  • det er veldig enkelt å legge til et ikon hvor som helst.

Helt ærlig gjør Font Awesome det den gjør veldig bra eksepsjonelt bra.

For å toppe det hele, er det ikke mye av en læringskurve. Når du har Font Awesome installert på nettstedet ditt, er alt du trenger å gjøre:

  • bla gjennom de tilgjengelige ikonene for å få en fin oversikt over hva som er der
  • sjekk ut eksemplene (behandle dem som en rask veiledning).

Den visuelle kvaliteten på selve ikonene er også veldig høy. Et vanlig problem med mange ikonpakker som er tilgjengelige på nettet, er at de har en tendens til å se bra ut bare i bestemte størrelser, på grunn av ting som for mye eller for lite detaljer, uklare former og så videre. Men Font Awesome-ikoner er ikke sånn i det hele tatt. Det ser ut til at de er designet for å fungere hvor som helst og for å se bra ut uansett størrelse du vil bruke. La oss dessuten huske at de er alle vektorer, så skalering er ikke et teknisk problem heller.

Det viktigste er at Font Awesome-ikoner oppnår tre hovedmål designmessig:

  • Designene er konsistente fra ikon til ikon, så alt passer sammen.
  • Designene er veldig minimale, noe som hjelper ikonene til forskjellige formål (de ser spesielt bra ut for navigasjonselementer).
  • Mengden blir en kvalitet – uansett hvor mange ikoner du trenger, vil Font Awesome kunne tilby.

OK, la oss gå videre til hvordan du gjør delen av gjennomgangen:

Hvordan bruke Font Awesome med WordPress?

Alt dette ros til side, la oss bare se hvordan vi kan bruke Font Awesome med WordPress.

Og … det er et problem.

Eller rettere sagt, det er et problem hvis du noen gang ikke har vært i utseendet / redigeringsdelen av wp-admin.

Dette er hva jeg mener:

For å installere Font Awesome på WordPress-nettstedet ditt, har du to alternativer:

  • Manuell installasjon
  • Via plugins

Og her er kickeren: Font Awesome er et av få tilfeller der å gjøre ting på den manuelle måten faktisk er bedre enn å bruke plugins.

La oss gå litt fra hovedgjennomgangen og vise deg:

Hvis du leter etter en Font Awesome-plugin, vil du sannsynligvis snuble over disse to:

  • Better Font Awesome – vis Font Awesome ikoner hvor som helst i blogginnholdet.
  • Font Awesome 4 Menus – vis Font Awesome ikoner i menyer.

Mens begge teknisk gjør jobben sin, er det noen problemer.

Å starte med Better Font Awesome, som du kan forestille deg, å få funksjonaliteten er enkel – bare installer og aktiver plugin-modulen (du trenger ikke å gå til Font Awesome selv eller noe). Alt du trenger er plugin-modulen.

Etter installasjonen får du denne boksen på skjermbildet for redigering av innlegg:

sett inn ikon via plugin

Hvis du klikker på det, kan du velge et Font Awesome-ikon og få det med som en kortkode. Kul.

Dette fungerer mesteparten av tiden, etter vurderinger. Men ikke alltid. For meg rotet det for eksempel CSSen min helt – som i, hele tema stylingen sluttet å virke (og det er standard Twenty Fifteen temaet vi snakker om her, så ikke noe fancy).

Nå sier jeg ikke at plugin-en vil forårsake disse problemene for deg også, men det er sannsynlig at du vil komme over forskjellige problemer som dette over tid – spesielt når nye versjoner av Font Awesome eller WordPress slippes. Dette er kanskje ikke verdt det. Se for deg en dag at du oppdaterer nettstedet ditt, og CSS-en din forsvinner. Hvor lang tid vil det ta deg å spore problemet tilbake til en bestemt plugin? Hvor mange besøkende vil se det nedlagte nettstedet i mellomtiden?

Nå om den andre pluginen, Font Awesome 4 Menus. Dette fungerer, og ser ut til å prestere rimelig bra. Alt du gjør er å installere det, og så kan du legge til tilpassede klasser til menyelementene dine, slik:

legg til ikonklasse

Klassene er de samme som listet i den offisielle Font Awesome-dokumentasjonen. Plugin-enheten tar vare på fargen på ikonet for å matche menyen, avstanden, alt.

menyikoner

Det er veldig bra hvis du bare trenger Font Awesome for menyene dine, men dessverre fungerer det ikke hvis du vil vise ikoner i innholdet. Utstilling (a):

mangler ikon

Etter min ærlige mening, vil du bli bedre med å integrere Font Awesome med WordPress-siden for hånd, uten plugins. Det er mindre problemer i det lange løp, og integrasjonen ser ut til å være mye mer stabil.

Hvordan integrere Font Awesome med WordPress

I det vesentlige, som beskrevet her, kan du gjøre dette på to forskjellige måter:

  • Få direkte innebygd kode direkte fra Font Awesome.
  • Last ned pakken og last den deretter opp til serveren din via FTP.

Til å begynne med ble jeg fristet til å laste ned den og ha den vertskap for meg selv, men så skjønte jeg at det bare ville bety ekstraarbeid. Riktignok er det ikke så mye arbeid å skaffe pakken og laste den opp via FTP (# lat), men da må du også passe på å holde den oppdatert.

Når du arbeider med en innebygd, derimot, er alt ivaretatt for deg. Og hvis du setter alt vedlikeholdsarbeidet til side, får du også pakken servert fra en CDN, noe som også er bedre for ytelse.

Veiledningen for å dele er veldig grei, bare skriv inn e-posten din og få innebygd koden levert til deg:

komme i gang med Font Awesome

Font Awesome vil sende deg en velkomst-e-post med innebygd kode, pluss et alternativ for å registrere den koden, noe som gir deg noen ekstra fordeler. (Merk: Dette er ikke obligatorisk, du trenger ikke registrere deg for å få hovedfunksjonen Font Awesome.)

Så når du har koden din, bare gå til delen “utseende / redaktør” i wp-admin (alltid ta en sikkerhetskopi av hele nettstedet og individuelle filer før du gjør endringer), og legg til den koden i delen av temaet. Dette er vanligvis i header.php-filen, slik:

hodeseksjon

Merk: Husk at hvis du noen gang oppdaterer temaet, vil denne Font Awesome-integrasjonen forsvinne, og du må gjøre om på nytt. Når du bruker et barn-tema imidlertid (som nevnt i en forrige artikkel), er det ingen slike problemer.

Rett etter at du har inkludert innebygd koden, har du aktivert Font Awesome på nettstedet ditt. Jobb gjort – du kan nå begynne å bruke alle ikonene som du vil!

Valgfritt: Registrer din fantastiske Awesome-konto

Som jeg nevnte, når du får innebygd koden, har du også tilbud om sjansen til å registrere kontoen din på Font Awesome. Dette er ikke nødvendig, men jeg anbefaler faktisk at du gjør det. Kontoen er gratis, og du får et par ting til gjengjeld:

  • Muligheten til å konfigurere embedet ditt.

Font Awesome embed customization

  • Noen fine statistikker over ikonene du bruker.

Er det verdt å gå Premium?

Noe jeg ikke visste med det første, var at Font Awesome også tilbød en premiumversjon av produktet deres som heter Fort Awesome.

De viktigste tingene å vite om det:

  • Den har flere tusen ikoner. Med Fort Awesome får du masse ekstra ikoner fordelt på individuelle sett (tematiske, forskjellige designstiler osv.). Dette lar deg tilfredsstille alle nettstedets ikonbehov gjennom ett verktøy – spesielt hvis du trenger et veldig spesifikt sett med ting å representere via ikoner.
  • Du kan laste opp og bruke dine egne ikoner. Dette er kult fordi det lar deg laste opp ting som din logo, produktikoner, eller hva annet er fornuftig, og legge dem til Font Awesome-biblioteket. Styrken her er at du deretter bruker disse ikonene akkurat som alle andre Font Awesome-ikoner – alle ikonene dine fungerer konsekvent uansett kilde.
  • Du får tilpassede innstillinger. Du kan angi domenene der ikonsettene dine kan brukes, og så videre.
  • Du kan ta med skrifter i settene dine. Du kan velge mellom noen av de beste gratis skrifttypene eller laste opp dine egne. Dette holder typografiske eiendeler for nettstedet alt på ett sted.
  • Du får laste inn alt dette gjennom en optimalisert CDN levert via MaxCDN.

Til slutt er kjernen i Font Awesomes premium-tilbud brukervennlighet, forbedring av ytelsen og generell enkel styring av alle ikoner og skrifttyper.

Planene starter på 49 dollar i året (det er en gratis prøveperiode). Her er hva som er inni:

Fort Awesome planer

Når det er sagt, er dette premium-tilbudet trolig noe som bare større nettsteder, netthandelbutikker eller tematiske nettsteder vil dra nytte av. På slutten av dagen trenger du sannsynligvis bare en håndfull ikoner på nettstedet ditt, og du vil ikke oppdatere dem veldig ofte – i det minste hvis vi snakker standard WordPress-blogger.

På den annen side kan slike nettbutikker lage egendefinerte ikoner for individuelle produkter, eller bruke forskjellige ikonpakker for å gjøre sidene deres mer attraktive for kjøperen. Men det handler fortsatt om volumet. Små produktkataloger kan veldig godt gjøre med ikoner som er opprettet for hvert produkt manuelt, uten Font Awesome, så de vil fortsatt ikke ha mye nytte av premiumpakkene.

Det er også verdt å påpeke at Font Awesome premium ikke er en “all inclusive” -pakke. Det er ekstra betalte ikonpakker (opptil $ 50 per stykke), så du kan finne deg fremdeles nå frem til lommeboka selv etter at du har fått premium-tilbudet.

Det det hele kommer ned til er at Fort Awesome (Font Awesome premium) ikke nødvendigvis er det beste alternativet for de fleste WordPress-blogger. Jeg tror ærlig at det å følge med gratis tilbudet sannsynligvis vil tilfredsstille dine behov 99% av tiden.

Når det gjelder premium, er det sannsynligvis en god investering bare hvis du driver et større nettsted som er avhengig av visuelle fremstillinger av forskjellige elementer, produkter eller menyer, og legger til nye elementer til biblioteket veldig ofte. I disse scenariene vil du også dra nytte av Font Awesome’s CDN-levering, noe som gjør nettstedet ditt raskere i prosessen.

Konklusjon

Jeg synes virkelig Font Awesome er et flott produkt. Aldri før har det vært så enkelt å integrere kule, pent designet ikoner på nettstedet ditt. Du er bokstavelig talt bare en tag bort fra (nesten?) det perfekte ikonet for hva du vil visualisere.

Font Awesome i et nøtteskall:

  • Font Awesome gratis: Ja, ja, ja.
  • Font Awesome premium (Fort Awesome): Meh.
  • Ulike Font Awesome WordPress-plugins: Ok, men ikke fantastisk.

Og til slutt, la oss også understreke at Font Awesome er et fullstendig åpen kildekode-prosjekt som du kan bruke til omtrent alle formål, inkludert kommersielle – du verken trenger å betale tilleggsavgifter eller be noen om tillatelse.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map