Ikonfonter er symboler, i stedet for bokstaver, som lar deg legge til vektorikoner på nettstedet ditt uten å redusere hastigheten, siden du ikke ville brukt store grafikkfiler, men fontfiler. Enten bokstaver eller ikoner, fonter er i seg selv grafikk, og har flere bruksområder enn bare tekst. I denne artikkelen vil vi diskutere hvordan du legger til ikonfonter på WordPress-nettstedet ditt. Men først, la oss diskutere situasjonene der du kanskje vil bruke dem.
Når kan jeg bruke mine ikonfonter?
Den åpenbare fordelen med ikonfonter fremfor konvensjonelle bildebaserte ikoner er hastighet: et skriftsymbol, som er en vektorgrafikk, laster likt uansett størrelse hvert ikon tar opp på skjermen din. Ikke-vektorgrafikk mister kvalitet når den skaleres opp og blir uklar. De er også svært vanskelige å manipulere, og kan kreve at du bruker bilderedigeringsprogrammer for å lage flere versjoner av hver grafikk og deretter fikle med nettstedinnstillingene dine til du har forsikret deg om at hver enhet den besøkende bruker vises den optimale versjonen av hver. grafikk.
Omvendt er fonter (inkludert ikonfonter). lett skalerbar uten tap i kvalitet, de er bokstavelig talt laget for å bli stylet med farger og skygger, om nødvendig, og er generelt lett, spesielt i forhold til annen grafikk.
En ikonfont inneholder vanligvis ofte brukte symboler for ulike nettfunksjoner, som f.eks mapper, chattebobler, piler, mapper, pinner og lignende. De finnes veldig ofte i navigasjonsmenyer, men du kan bruke dem hvor som helst du ellers ville brukt et bilde for å indikere en vanlig funksjon. Det vil også ev sparer deg litt tid og penger på ikondesign – tross alt er alt du trenger en omfattende font.
Det er mange ikonfonter å velge mellom, men de foretrukne er det Font Awesome og Font Elegant. For formålet med denne demonstrasjonen vil vi stort sett bruke Font Awesome. Her er hva vi skal dekke:
Annet enn metodene beskrevet ovenfor, kan du legge til ikonfontene dine som egendefinerte fonter, akkurat som du ville gjort med alle andre fonter. Vi vil ikke diskutere denne metoden her, fordi vi allerede har dekket å legge til tilpassede fonter til WordPress i dybden i en annen artikkel.
Hvis du er en nybegynner WordPress-bruker og ikke føler deg komfortabel med å legge til nye fonter til temaet ditt ved å modifisere temafilene – helt forståelig – så er en plugin sannsynligvis et godt alternativ for deg. Programtillegget vi skal bruke er Bedre Font Awesome. Du må installere og aktivere den fra plugins-delen av WordPress-dashbordet.
Og det er det, nettstedet ditt vil nå ha Font Awesome-støtte.
Men for å bruke selve ikonene trenger du noe annet: en kortkode. En kortkode er et stykke kode med en enkel funksjon. I dette tilfellet er det for å vise et ikon. For å bruke Font Awesome-ikoner må du først vite hva de heter og hvordan de ser ut. Det kan du enkelt gjøre ved å bruke dette jukseark levert av utviklerne av fonten.
Deretter legger du til skriftkortkodene dine på nettstedet ditt, ganske enkelt legg til en kortkodeblokk hvis du bruker Gutenberg-blokkredigereren, et kortkodeelement hvis du bruker Elementor, eller bare skriv inn kortkoden der du trenger den hvis du bruker den klassiske editoren (pass på at du har byttet til tekstredigeringsmodus). Vi vil vise deg hvordan du gjør det med Gutenberg. Vi legger til kortkoden i et innlegg, men den fungerer på samme måte for alle områder på nettstedet ditt som kan godta en kortkode.
Ved å klikke på Plus signerer, får du blokkmenyen. Søk etter en kortkodeblokk, og lim inn kortkoden du liker. Du kan finne et ikons navn på juksearket, og legge det til i kortkoden: [icon name=”iconname”]
La oss si at den tilfeldig genererte teksten vi bruker beskriver en drikkevare. Som en vignett i teksten vil vi bruke [icon name=”beer”] kortkode mellom to tekstblokker.
Du kan også bruk disse kortkodene i tekstblokker, på en måte som kuler. For eksempel vil vi innlede det siste avsnittet med et annet ikon, ved å bruke kortkoden [icon name=”arrow-circle-right”].
Og ikonene dine vil være synlige som en del av teksten på siden din.
En annen funksjon ved denne plugin er at den oppdateres automatisk: hvis det er en ny versjon av Font Awesome, vil du ikke bli etterlatt! For mer om hvordan du oppdaterer plugins, kan du sjekke vår praktiske trinnvise veiledning.
En populær visuell editor, Elementor lar deg enkelt bruke ikonfonter. Faktisk kommer Elementor med Font Awesome allerede integrert. For å legge til et ikon ved hjelp av Elementor, begynn å redigere et innlegg i Elementor, og finn Ikon element i menyen til venstre og dra det dit du vil ha det.
Nå har vi standarden, plassholderikonet. For å velge et annet ikon, klikk ganske enkelt på ikonbildet på venstre side mens ikonelementet ditt er valgt. Du kan se at den har en blå kant rundt seg.
Velg ikonet du liker, og klikk på Sett inn for å sette det inn i stedet for plassholderen. Vi har valgt et bjelleikon fra Font Awesome – Vanlig ikonsett.
I samme fane kan du legge til en lenke eller endre ikonets justering, slik vi har.
Du kan endre fargen i Stil fanen mens ikonet er valgt.
Og nå vet du hvordan du bruker ikoner i Elementor. Det er mange andre alternativer for stil og funksjonalitet til ikonene dine i Elementor, men nå vet du det grunnleggende.
Vi vil vise deg den enkleste metoden for å legge til Font Awesome-ikoner, et omfattende og konstant oppdatert ikonsett, til WordPress-nettstedet ditt ved hjelp av kode. Først må du gå til Font Awesome nettsiden, og klikk på Start gratis knapp.
Deretter må du oppgi Font Awesome med e-postadressen din og klikk Send settkode.
Deretter må du sjekke e-postadressen din og konfigurere kontoen din. Bare følg instruksjonene på skjermen til du kommer til skjermen med koden din. Klikk Kopier settkoden å kopiere den.
Til slutt må du kopiere denne koden til temaet ditt header.php fil. Du finner den ved å navigere til Utseende/temaredaktør fra WordPress-dashbordet. Det vil være i menyen helt til høyre.
Bare lim inn kitkoden du kopierte rett under -taggen, så er du klar.
Til slutt kan du også legge til Font Awesome-ikoner til WordPress-nettstedet ditt individuelt, direkte fra utviklerens bibliotek. Du trenger ikke en plugin eller noe annet for å gjøre det, du kan ganske enkelt bruke et ikon du liker. For å gjøre det, gå ganske enkelt til Font Awesome ikongalleri og finn et ikon du liker.
Klikk på den, så finner du koden du trenger for å bygge den inn.
For å legge til ikonet ditt, må du legge det til med kode. For Classic-editoren fungerer det bare ved å lime inn koden der du vil ha den, ved å bruke tekstmodus. I Gutenberg bruker vi Egendefinert HTML blokkere. I Elementor trenger du Egendefinert HTML element, men prinsippet er det samme. Bare lim inn koden du fikk fra ikonbiblioteket.
Og ikonet ditt vil være akkurat der du legger det!
For å konkludere
Som vi har vist, er det veldig enkelt å installere en ikonfontpakke i WordPress. Og ikke bare det – det bidrar positivt til responsen til nettstedet ditt og til lastehastigheter, noe som gjør dem til et godt valg hvis du henvender deg til brukere som får tilgang til tjenestene dine på mobiler eller med tregere tilkobling, men også bedre totalt sett når det gjelder brukeropplevelse. Lett, lett å style og rask å laste: hva er det å ikke like med det?
Støtt vårt arbeid ❤️
Hvis du likte denne artikkelen, vurder å gi en tips for å hjelpe oss med å fortsette å publisere kvalitetsinnhold.
