Hur kan man använda och få ut det mesta av det?

av

Ikoner är fascinerande!

De har kraften att snabbt kommunicera med publiken genom att skapa en stark visuell koppling.

Det är därför som ikoner används flitigt överallt, inklusive WordPress-webbplatser.

Dessutom kan det vara tråkigt att använda samma tema på din webbplats i flera månader. Det är vanligt.

Och då kommer du att leta efter något mer intressant, använda det och bli uttråkad igen,

Och cykeln fortsätter och fortsätter…

Så, hur kan du hoppa över den cykeln av tristess?

Dashicons är ett utmärkt sätt!

Det kan piffa upp estetiken på din webbplats och hjälpa dig att sticka ut. Det kommer också att rädda dig från att anstränga dig extra och tränga din webbplats med onödiga bilder som saktar ner sidhastigheten.

Så låt oss utforska Dashicons och hur du kan använda dem effektivt på din WordPress-webbplats.

Vad är WordPress Dashicons?

Dashicons är WordPress officiella ikontypsnitt som introducerades för flera år sedan med sin version 3.8. Dessa typsnitt är coola och häftiga att titta på om du använder dem på din webbplats. De är SVG-filer av högsta kvalitet som du enkelt kan skala till valfri storlek utan pixelisering.

Eftersom de har inbyggt WordPress-stöd på grund av att de skapats av deras team själv, kan du använda dem direkt utan att ladda ytterligare skript. Det finns cirka 350 ikonteckensnitt inkluderade, som du kan hitta i den officiella Resurser för WordPress-utvecklare.

De har kategoriserat dessa ikoner baserat på ämnet, plus att du kan se ett dynamiskt sökfält som låter dig filtrera tillgängliga ikoner.

Du kan använda dessa ikoner på:

  • WordPress instrumentpanel
  • Navigationsmenyer
  • Sidor och inlägg
  • Metadata
  • Redaktörselement
  • Anpassade plugins och teman
  • Administratörspaneler
  • Front-end design

Lägger du märke till att jag säger ”ikoner” upprepade gånger?

Här menar jag bara ikontypsnitt.

Inte bilder i form av ikoner.

Ja, det är skillnad mellan de två.

Låt oss reda ut det.

Skillnad mellan bildikoner och ikontypsnitt?

Ikonteckensnitt och bildikoner är lite lika, men istället för alfabet finns vektorsymboler i ikonteckensnitt.

Blev det för tekniskt?

Låt mig förtydliga det.

I grund och botten liknar dessa ikonteckensnitt bilder som du kan använda för att lägga till symboler på din webbplats, men inte en faktisk bild.

De ger dig många fördelar.

Hur?

Ta reda på det i nästa avsnitt.

Varför ska du använda dem?

  • Skalbara som texter som används på din webbplats eftersom de är typsnitt
  • Lättvikt som inte påverkar din sidas laddningshastighet jämfört med bilder
  • Kan ställa in ikonfärgen genom CSS och lägga till extra egenskaper som gradientfärg, skugga, etc.
  • Bra på att spara för många HTTP-förfrågningar genom att låta dig ladda teckensnitt på en gång, som du kan använda på dina sidor. Om du använder många bilder på webbplatsen måste du göra många förfrågningar för att hämta dem, vilket ökar sidladdningstiden.
  • Lätt att använda och justera än bilder. Du kan lägga till igenkännbara och kreativa symboler utan att behöva återskapa dem varje gång du behöver en ikon för en videospelare, e-post, musik eller någon annan sak.
  • Större tillgänglighet eftersom de är inbyggda direkt i WordPress

Hur använder man dem?

Att använda Dashicons är ingen raketteknik.

Lita på mig; Jag är bekant med båda :0

Följ bara några steg som nämns nedan för att komma igång med WordPress Dashicons.

Steg 1: Aktivera Dashicons på din WordPress-webbplats

Innan du börjar, aktivera Dashicons där du behöver, till exempel, ett tema. För detta måste du lägga till några koder i filen function.php.

Att göra det:

  • Gå först till tema-/utseenderedigeraren från din WordPress-instrumentpanel.
  • Öppna filen function.php.
  • Bläddra till slutet av filen och lägg till några rader kod för att köa skript
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

Ovanstående exempel är att aktivera Dashicons på frontend.

Se till att du skapar ett underordnat tema innan du redigerar filen functions.php. Det beror på att om du direkt redigerar temafilen och sedan kommer en uppdatering för det temat, så kommer den att åsidosätta alla ändringar du gör i filen.

Steg 2: Hitta Dashicon HTML- och CSS-koder

WordPress.org erbjuder ett bibliotek med Dashicons, som hjälper dig att hitta CSS- och HTML-koder som tillhör varje ikon. Här, gå till utvecklarresurser för att hitta de Dashicons du vill använda och sedan:

  • Klicka på ikonen för din önskan.
  • Välj mellan ”Kopiera CSS” eller ”Kopiera HTML” genom att klicka på den.
  • Nu kommer du att se ett popup-fönster. Kopiera bara koden till klippbordet.
  • Bestäm var du vill använda ikonen, som teman, metadata, navigeringsmeny etc.
  • Klistra in den kopierade koden i den valda platsens textwidget eller textredigerare.
  • Ändra ikonens utseende med anpassad CSS

Det är allt.

Dessutom är alla ikoner som standard 20 pixlar. Du kan ändra det med hjälp av CSS-elementen från alternativ som Google Chromes Inspect Element eller Firefoxs FireBug.

Hur får man ut det mesta av WordPress Dashicons?

Du såg hur du kunde använda Dashicons på din webbplats, och nu kommer vi att se hur de används för specifika ändamål.

1. Använda navigeringsmenyn

För att lägga till ikoner till menyn, följ stegen nedan:

  • Gå till Menyer/Utseende från instrumentpanelen
  • Kopiera HTML-koder designade för menyikon från WordPress.org
  • Klistra in den på ”Navigationsetikett” på instrumentpanelen
  • Klicka på ”spara”-knappen och ladda sedan startsidan. Den ska visa den coola och skarpa ikonen.

2. Använda på post meta

Du kommer att kunna använda Dashicons precis framför ett datum, författarens namn, tagg eller kategori baserat på temat plus data den visar.

Eftersom du redan har ställt Dashicons i kö, öppna filen style.css. Annars kan du också välja en anpassad CSS-redigerare, som inte låter dig förlora dina ändringar efter temauppdateringar. Lägg sedan till din CSS-kod efter att ha hittat en matchande väljare.

3. På WordPress-backend

Om du vill att olika ikoner ska inkluderas för olika anpassade inläggstitlar, inläggstyper eller widgets är det enkelt att göra.

Ett snabbt tips: Skapa en kortkod

För att enkelt använda Dashicons kan du skapa en kortkod för det. Det är användbart, speciellt när du skapar en webbplats för dina kunder som skulle tycka att det är lätt att infoga Dashicons utan att krångla med koderna.

Slutsats

Jag hoppas att saker och ting är ganska tydliga från din sida angående WordPress Dashicons. De täcker inte bara estetiken på din webbplats utan är också enkla att använda och förbättrar sidladdningshastigheten.

Och du vet, ”skönhet och hjärna” är en sällsynt kombination.

Så skynda dig, använd dessa iögonfallande Dashicons på din WordPress-webbplats!