Folk blir naturlig tiltrukket av det visuelle utseendet til en nettstedet Web av WordPress, like mye som de tiltrekkes av det skriftlige innholdet du deler. Faktisk ifølge Jeff Bullas ", Artikler med bilder har 94% flere visninger enn artikler uten bilder.

Det er en enorm økning i sidevisninger hvis du spør meg.

Og hva er egentlig årsaken?

Bare legg til noen høykvalitets, artikkelrelevante bilder i hele innholdet ditt.

Men hva med bildene på din nettstedet Web som går utover skjermbilder og fotografier? Hva med bilder som ikke bare fanger oppmerksomhet, men som også har en nyttig funksjon?

Ja, jeg snakker om ikoner. Du kjenner de små bildene som finnes på nettsteder for å oppmuntre til deling på sosiale medier, for å illustrere kontaktsider til bedriftseiere, for å nevne noen av tilfellene av bruk.

Ettersom ideen ble hentet fra dette nettstedet, Besøkende ble ikke bare tiltrukket av bilder på nettsteder, men var tilbøyelige til å samhandle med dem, begynte folk å legge dem til på nettsidene deres.

Likevel, som teknologien utvikler seg, som alltid, har tradisjonelle bildeikoner begynt å vakle som en bildeløsning for nettsteder. Dette er fordi de gjør sidene mye tyngre og derfor tregere, men fremfor alt var denne løsningen ikke alltid egnet for mobiltelefoner.

Men det er en løsning: ikonfonter.

I dag skal jeg fortelle deg hva ikonfonter er og fordelene ved å bruke dem på WordPress-nettstedet ditt. I tillegg vil jeg vise deg hvordan du legger til ikonfonter til WordPress-nettstedet ditt ved hjelp av det populære pluginet " Bedre Font Awesome '.

Så la oss starte.

Hva er ikonfonter, og hvorfor bør du bruke dem?

Ikonefonter er akkurat det de sier: skrifter innebygd i ikoner. Faktisk ikonfonter eller " make-ikonet "Kan beskrives som en skrift som bare viser tegn eller symboler, ikke bokstavene og tallene som tradisjonelle skrifter og tekst er assosiert med.

Ikonefonter brukes til å vise ofte brukte symboler på nettstedet ditt. For eksempel er sosiale medieknapper, handlekurven din, nedlastingsknapper og navigasjonsknapper eksempler på ikoner som viser små, interaktive bilder på nettstedet ditt.

Hvorfor bruke ikonfonter?

Bildeikoner har fungert bra tidligere for mange nettstedeiere. Etter hvert som navigasjonsregler, brukervennlighet og design har utviklet seg, har imidlertid ikonfonter blitt den beste løsningen for å vise interaktive bilder på en nettside.

Her er en titt på noen overbevisende grunner til at ikonfonter er det beste valget:

• Kan utvides enkelt uten å miste kvaliteten
• Kan tilpasses når det gjelder farge og nyanse
• 100% responsive
• Fungerer som CSS image sprites, men oppfører seg som tekst
• Enkel å bruke
• kompatible nettlesere
• Tilpass opasitet, rotasjon og mer
• Mindre filstørrelse
• Ikke avgjøre hastigheten eller ytelsen til nettstedet ditt

Som du kan se, er det flere grunner til at du kanskje vil bruke en ikonfont på nettstedet ditt i motsetning til et bildeikon.

Installere fontikoner på nettstedet ditt ved hjelp av et plugin

Better Font Awesome er en WordPress Plugin freeware som lar deg automatisk integrere den nyeste versjonen av Font Awesome i ditt WordPress-prosjekt. Dessuten kommer den med CSS, kortkoder og TinyMCE-kortkodegenerator.

Denne pluginen har en rekke nyttige funksjoner for eiere av nettsteder:

• Rutineoppdatering av den nyeste versjonen
• Mulighet for å veksle mellom versjoner av Font Awesome uten å endre korte koder
• Støtte for andre populære font-plugins inkludert kortkoder
• Utstedt av jsDelivr CDN

1 Trinn: Installere og aktivere Better Font Awesome

For å komme i gang, installer og aktiver "Better Font Awesome" -tillegget gjennom WordPress-dashbordet ditt, akkurat som du gjør med et annet plugin.

Naviger først til " Plugins> Legg til nye Og søk etter " Bedre Font Awesome '.

Velg deretter " installere nå »Og klikk på« aktivere '.

Når den er aktivert, legger pluginen til en koblingBedre Font AwesomeUnder Innstillinger-menyen på WordPress-dashbordet.

Trinn 2: Konfigurer plugin-innstillinger

Slik konfigurerer du plugin « Bedre Font Awesome ", Start med å klikke på menyelementet" Bedre Font Awesome Under Innstillinger. Når du har gjort det, vil du se en skjerm som ligner på dette:

Her kan du gjøre følgende:

• Versjon: Velg versjonen av “Better Font Awesome” du vil bruke.
• Bruk Minified CSS: Merk av i denne boksen hvis du vil bruke den minifiserte versjonen av CSS.
• Slett den eksisterende utskriftsfonten: velg denne boksen for å prøve å fjerne kodede utdrag og kortkoder lagt til av andre plugins og temaer.
• Skjul administratoranmeldelser: Skjul standardadvarsler som vises når API- og CDN-feil oppstår.

I tillegg til minimumsmengden av Better Font Awesome-alternativer, er det en liten "Bruk" -del som forklarer hvordan du legger til ikoner på nettstedet ditt.

Trinn 3: Legge til ikoner på nettstedet ditt

Det er tre enkle måter å legge til ikoner på nettstedet ditt ved å bruke "Better Font Awesome" - via kortnummer, HTML eller TinyMCE.

# 1. Legge til ikoner ved hjelp av kortnummer

For å legge til ikoner på nettstedet ditt ved hjelp av en kortkode, besøk først " Font Awesome For å se en komplett liste over tilgjengelige ikoner som kan brukes.

Her kan du søke etter ikonet du vil ha. Hvis du for eksempel vil ha et "e-post" -ikon, er det bare å søke etter det søkeordet og velge ikonet du vil bruke ved å klikke på det.

Etter å ha klikket på ikonet du vil legge til, vil du se et skjermbilde som viser bildet av ikonet med forskjellige størrelser og en liten blokk med kode:

Bare kopier kodeblokken og lim den inn hvor som helst på nettstedet ditt ved å bruke fanen "Tekstredigerer". Slik ser redaktøren ut på nettstedet ditt:

Til slutt, her er hva Besøkende vil se når de går inn på nettstedet ditt:

# 2. Legge til ikoner ved hjelp av HTML-kode

Som vi så i avsnittet " Bruk Du har muligheten til å bruke HTML-kode for å sette inn ikoner på nettstedet ditt. Imidlertid tar plugin-utviklere hensyn til at bruk av HTML krever versjonsspesifikke prefikser.

Derfor anbefaler de at du bruker kortkoder i stedet. Men hvis du vil bruke HTML-kode, har Font Awesome det nyttig informasjon her.

# 3. Legge til ikoner ved hjelp av TinyMCE

Dette er sannsynligvis den enkleste måten å legge til ikoner på nettstedet ditt. I modusen "Visual Editor" klikker du bare på Sett inn-ikonet. Derfra blar du gjennom de tilgjengelige ikonalternativene eller begrenser resultatene dine ved hjelp av søkefunksjonen.

Når du har funnet ikonet du ønsker, klikker du bare på det. Kortkodegeneratoren legger automatisk inn den nødvendige informasjonen i innlegget eller siden din.

Hvis du vil lære hvordan du tilpasser ikonene på nettstedet ditt, kan du se eksemplene på " Font Awesome '.