Hvordan bruke og få mest mulig ut av det?

Ikoner er fascinerende!

De har kraften til å kommunisere raskt med publikum ved å etablere en sterk visuell forbindelse.

Dette er grunnen til at ikoner brukes mye overalt, inkludert WordPress-nettsteder.

Det kan også være kjedelig å bruke det samme temaet på nettstedet ditt i flere måneder. Det er vanlig.

Og da vil du være på jakt etter noe mer interessant, bruke det, og kjede deg igjen,

Og syklusen fortsetter og fortsetter…

Så hvordan kan du hoppe over den syklusen av kjedsomhet?

Dashicons er en utmerket måte!

Det kan krydre estetikken til nettstedet ditt og hjelpe deg å skille deg ut. Det vil også spare deg for å anstrenge deg ekstra og fylle nettstedet med unødvendige bilder som reduserer sidehastigheten.

Så la oss utforske Dashicons og hvordan du kan bruke dem effektivt på WordPress-nettstedet ditt.

Hva er WordPress Dashicons?

Dashicons er WordPress offisielle ikonfonter som ble introdusert for år siden med versjon 3.8. Disse fontene er kule og fantastiske å se på hvis du bruker dem på nettstedet ditt. De er SVG-filer av topp kvalitet som du enkelt kan skalere til alle størrelser uten pikselisering.

Siden de har innebygd WordPress-støtte på grunn av å være laget av teamet deres selv, kan du bruke dem direkte uten å laste inn flere skript. Det er rundt 350 ikonfonter inkludert, som du kan finne inne i den offisielle Ressurser for WordPress-utviklere.

De har kategorisert disse ikonene basert på emnet, pluss at du kan se et dynamisk søkefelt som lar deg filtrere tilgjengelige ikoner.

Du kan bruke disse ikonene på:

• WordPress dashbord
• Navigasjonsmenyer
• Sider og innlegg
• Metadata
• Redaktørelementer
• Egendefinerte plugins og temaer
• Administrasjonspaneler
• Front-end design

Legger du merke til at jeg sier «ikoner» gjentatte ganger?

Her mener jeg bare ikonfonter.

Ikke bilder i form av ikoner.

Ja, det er forskjell på de to.

La oss nøste opp i det.

Forskjellen mellom bildeikoner og ikonfonter?

Ikonfonter og bildeikoner er noe like, men i stedet for alfabeter er vektorsymboler der i ikonfonter.

Ble det for teknisk?

La meg klargjøre det.

I utgangspunktet ligner disse ikonfontene bilder som du kan bruke til å legge til symboler på nettstedet ditt, men ikke et faktisk bilde.

De gir deg mange fordeler.

Hvordan?

Finn ut i neste avsnitt.

Hvorfor bør du bruke dem?

• Skalerbare som tekster som brukes på nettstedet ditt ettersom de er fonter
• Lettvekt som ikke påvirker sidens lastehastighet sammenlignet med bilder
• Kan angi ikonfarge gjennom CSS og legge til ekstra egenskaper som gradientfarge, skygge, etc.
• Flott til å lagre for mange HTTP-forespørsler ved å la deg laste inn fonter på en gang, som du kan bruke på tvers av sidene dine. Hvis du bruker mange bilder på siden, må du komme med mange forespørsler for å hente dem, noe som øker sidens lastetid.
• Enkel å bruke og justere enn bilder. Du kan legge til gjenkjennelige og kreative symboler uten å måtte gjenskape dem hver gang du trenger et ikon for en videospiller, e-post, musikk eller andre ting.
• Større tilgjengelighet fordi de er innebygd rett inn i WordPress

Hvordan bruke dem?

Å bruke Dashicons er ingen rakettteknikk.

Stol på meg; Jeg er kjent med begge :0

Bare følg noen trinn nevnt nedenfor for å komme i gang med WordPress Dashicons.

Trinn 1: Aktiver Dashicons på WordPress-siden din

Før du begynner, aktiver Dashicons der du trenger for eksempel et tema. For dette må du legge til noen få koder til function.php-filen.

Å gjøre det:

• Gå først til Theme/Appearance Editor fra WordPress Dashboard.
• Åpne function.php-filen.
• Rull til slutten av filen og legg til noen få linjer med kode for å sette skript i kø

add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

Eksempelet ovenfor er å aktivere Dashicons på frontend.

Sørg for at du oppretter et undertema før du redigerer functions.php-filen. Det er fordi hvis du redigerer temafilen direkte og så kommer en oppdatering for det temaet, vil den overstyre alle endringene du gjør i filen.

Trinn 2: Finn Dashicon HTML- og CSS-koder

WordPress.org tilbyr et bibliotek med Dashicons, som hjelper deg med å finne CSS- og HTML-koder som tilhører hvert ikon. Her, gå til utviklerressurser for å finne Dashicons du vil bruke, og deretter:

• Klikk på ikonet du ønsker.
• Velg mellom «Kopier CSS» eller «Kopier HTML» ved å klikke på den.
• Nå vil du se et popup-vindu. Bare kopier koden til utklippstavlen.
• Bestem hvor du vil bruke ikonet, for eksempel temaer, metadata, navigasjonsmeny osv.
• Lim inn den kopierte koden i det valgte stedets tekstwidget eller tekstredigering.
• Endre ikonets utseende ved hjelp av tilpasset CSS

Det er det.

Dessuten har alle ikonene som standard størrelse 20 piksler. Du kan endre det ved å bruke CSS-elementene fra alternativer som Google Chromes Inspect Element eller Firefoxs FireBug.

Hvordan få mest mulig ut av WordPress Dashicons?

Du så hvordan du kunne bruke Dashicons på nettstedet ditt, og nå vil vi se bruken til bestemte formål.

1. Bruke navigasjonsmenyen

Følg trinnene nedenfor for å legge til ikoner i menyen:

• Gå til Menyer/Utseende fra dashbordet
• Kopier HTML-koder designet for menyikon fra WordPress.org
• Lim den inn på «Navigasjonsetiketten» på dashbordet
• Klikk på «lagre»-knappen og last deretter inn hjemmesiden. Den skal vise det kule og skarpe ikonet.

2. Bruk på post meta

Du vil kunne bruke Dashicons rett foran en dato, forfatterens navn, merke eller kategori basert på temaet pluss data den viser.

Ettersom du allerede har stilt Dashicons i kø, åpne style.css-filen. Ellers kan du også gå for en Custom CSS-editor, som ikke lar deg miste endringene dine etter temaoppdateringer. Deretter legger du til CSS-koden din etter å ha funnet en matchende velger.

3. På WordPress-backend

Hvis du vil ha forskjellige ikoner inkludert for forskjellige tilpassede innleggstitler, innleggstyper eller widgets, er det enkelt å gjøre.

Et raskt tips: Lag en kortkode

For å bruke Dashicons enkelt, kan du lage en kortkode for det. Det er nyttig, spesielt når du lager et nettsted for kundene dine som vil finne det enkelt å sette inn Dashicons uten å rote med kodene.

Konklusjon

Jeg håper ting er ganske klare på din side angående WordPress Dashicons. De dekker ikke bare estetikken til nettstedet ditt, men er også enkle å bruke og forbedrer sidens lastehastighet.

Og du vet, «skjønnhet og hjerne» er en sjelden kombinasjon.

Så skynd deg, bruk de iøynefallende Dashicons på WordPress-siden din!