Hvordan kan man bruge og få mest muligt ud af det?

Af
Tweet
Share
Share
Pin

Ikoner er fascinerende!

De har magten til at kommunikere hurtigt med publikum ved at etablere en stærk visuel forbindelse.

Dette er grunden til, at ikoner bruges flittigt overalt, inklusive WordPress-websteder.

Det kan også være kedeligt at bruge det samme tema på dit websted i flere måneder. Det er almindeligt.

Og så vil du være på jagt efter noget mere interessant, bruge det, og kede dig igen,

Og cyklussen fortsætter og fortsætter…

Så hvordan kan du springe den cyklus af kedsomhed over?

Dashicons er en fremragende måde!

Det kan krydre æstetikken på dit websted og hjælpe dig med at skille dig ud. Det vil også spare dig for at gøre en ekstra indsats og overfylde dit websted med unødvendige billeder, der sænker sidehastigheden.

Så lad os udforske Dashicons, og hvordan du kan bruge dem effektivt på dit WordPress-websted.

Hvad er WordPress Dashicons?

Dashicons er WordPress’ officielle ikonskrifttyper, der blev introduceret for år siden med version 3.8. Disse skrifttyper er seje og fantastiske at se på, hvis du bruger dem på din hjemmeside. De er SVG-filer i topkvalitet, som du nemt kan skalere til enhver størrelse uden pixelisering.

Da de har indbygget WordPress-understøttelse, fordi de er oprettet af deres team selv, kan du bruge dem direkte uden at indlæse yderligere scripts. Der er omkring 350 ikonskrifttyper inkluderet, som du kan finde inde i den officielle Ressourcer til WordPress-udviklere.

  Sådan får du din pc til automatisk at tænde på en tidsplan

De har kategoriseret disse ikoner baseret på emnet, plus du kan se et dynamisk søgefelt, der giver dig mulighed for at filtrere tilgængelige ikoner.

Du kan bruge disse ikoner på:

  • WordPress dashboard
  • Navigationsmenuer
  • Sider og indlæg
  • Metadata
  • Editor elementer
  • Brugerdefinerede plugins og temaer
  • Admin paneler
  • Front-end design

Lægger du mærke til, at jeg siger “ikoner” gentagne gange?

Her mener jeg kun ikonskrifttyper.

Ikke billeder i form af ikoner.

Ja, der er forskel på de to.

Lad os afklare det.

Forskellen mellem billedikoner og ikonskrifttyper?

Ikonskrifttyper og billedikoner ligner noget, men i stedet for alfabeter er der vektorsymboler i ikonskrifttyper.

Blev det for teknisk?

Lad mig præcisere det.

Dybest set ligner disse ikonskrifttyper billeder, som du kan bruge til at tilføje symboler på dit websted, men ikke et faktisk billede.

De giver dig en masse fordele.

Hvordan?

Find ud af det i næste afsnit.

Hvorfor skal du bruge dem?

  • Skalerbare som tekster brugt på din hjemmeside, da de er skrifttyper
  • Letvægts, som ikke påvirker din sideindlæsningshastighed sammenlignet med billeder
  • I stand til at indstille ikonfarven gennem CSS og tilføje ekstra egenskaber såsom gradientfarve, skygge osv.
  • Fantastisk til at gemme for mange HTTP-anmodninger ved at give dig mulighed for at indlæse skrifttyper på én gang, som du kan bruge på tværs af dine sider. Hvis du bruger mange billeder på siden, bliver du nødt til at lave mange anmodninger for at hente dem, hvilket øger sidens indlæsningstid.
  • Nem at bruge og justere end billeder. Du kan tilføje genkendelige og kreative symboler uden at skulle genskabe dem, hver gang du har brug for et ikon til en videoafspiller, e-mail, musik eller andre ting.
  • Større tilgængelighed, fordi de er indbygget direkte i WordPress
  Vil Capital One fjerne charge off?

Hvordan bruger man dem?

At bruge Dashicons er ingen raketteknik.

Stol på mig; Jeg er bekendt med begge :0

Bare følg nogle trin nævnt nedenfor for at komme i gang med WordPress Dashicons.

Trin 1: Aktiver Dashicons på dit WordPress-websted

Inden du begynder, skal du aktivere Dashicons, hvor du skal bruge for eksempel et tema. Til dette skal du tilføje et par koder til filen function.php.

At gøre det:

  • Gå først til Theme/Appearance Editor fra dit WordPress Dashboard.
  • Åbn filen function.php.
  • Rul til slutningen af ​​filen, og tilføj et par linjer kode for at sætte scripts i kø
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

Ovenstående eksempel er for at aktivere Dashicons på frontend.

Sørg for at oprette et undertema, før du redigerer filen functions.php. Det er fordi, hvis du direkte redigerer temafilen, og så kommer der en opdatering til det tema, så vil den tilsidesætte alle de ændringer, du foretager i filen.

Trin 2: Find Dashicon HTML- og CSS-koder

WordPress.org tilbyder et bibliotek af Dashicons, som hjælper dig med at finde CSS- og HTML-koder, der hører til hvert ikon. Gå her til udviklerressourcer for at finde de Dashicons, du vil bruge, og derefter:

  • Klik på ikonet for dit ønske.
  • Vælg mellem “Kopier CSS” eller “Kopier HTML” ved at klikke på den.
  • Nu vil du se et pop op-vindue. Bare kopier koden til udklipsholderen.
  • Bestem, hvor du vil bruge ikonet, såsom temaer, Metadata, navigationsmenu osv.
  • Indsæt den kopierede kode i det valgte steds tekstwidget eller teksteditor.
  • Rediger ikonets udseende ved hjælp af tilpasset CSS
  Sådan finder du en fane med højt CPU-forbrug på Chrome og Firefox

Det er det.

Desuden har alle ikonerne som standard en størrelse på 20 pixels. Du kan ændre det ved hjælp af CSS-elementerne fra muligheder som Google Chromes Inspect Element eller Firefox’s FireBug.

Hvordan får man mest ud af WordPress Dashicons?

Du så, hvordan du kunne bruge Dashicons på dit websted, og nu vil vi se dets brug til specifikke formål.

1. Brug af navigationsmenuen

Følg nedenstående trin for at tilføje ikoner til menuen:

  • Gå til Menuer/Udseende fra dashboardet
  • Kopier HTML-koder designet til menuikonet fra WordPress.org
  • Indsæt det på “Navigationsetiketten” på dashboardet
  • Klik på knappen “Gem” og indlæs derefter hjemmesiden. Det skal vise det kølige og sprøde ikon.

2. Brug på post meta

Du vil være i stand til at bruge Dashicons lige foran en dato, forfatterens navn, tag eller kategori baseret på det tema plus data, det viser.

Da du allerede har sat Dashicons i kø, skal du åbne filen style.css. Ellers kan du også gå efter en Custom CSS-editor, som ikke lader dig miste dine ændringer efter temaopdateringer. Tilføj derefter din CSS-kode efter at have fundet en matchende vælger.

3. På WordPress-backend

Hvis du vil have forskellige ikoner inkluderet for forskellige brugerdefinerede indlægstitler, indlægstyper eller widgets, er det nemt at gøre.

Et hurtigt tip: Opret en kortkode

For nemt at bruge Dashicons kan du oprette en kortkode til det. Det er nyttigt, især når du laver en hjemmeside til dine kunder, som ville finde det nemt at indsætte Dashicons uden at rode rundt med koderne.

Konklusion

Jeg håber, at tingene er ret klare fra din side angående WordPress Dashicons. De dækker ikke kun æstetikken på din hjemmeside, men er også nemme at bruge og forbedrer sideindlæsningshastigheden.

Og du ved, ‘skønhed og hjerne’ er en sjælden kombination.

Så skynd dig, brug de iøjnefaldende Dashicons på dit WordPress-websted!