Sådan tilføjes brugerdefinerede ikoner i Elementor: 3 måder

Key Takeaways

• Elementors Icon Library popup viser kun Font Awesome som standard, i Regular, Solid og Brands sæt, og hver widget med et ikonfelt åbner den samme popup.
• Den hurtigste måde at tilføje brugerdefinerede ikoner i Elementor på er Upload SVG-knappen på ikonfeltet; hvis filen afvises, skal du slå Aktivér ufiltrerede filuploads til under Elementor > Indstillinger > Avanceret.
• Elementor Pros brugerdefinerede ikoner-skærm importerer en hel ikonskrifttype fra en Fontello-, IcoMoon- eller Fontastic .zip-fil og viser den under Mine biblioteker i popup-vinduet Ikonbibliotek.
• Elementor Pro forbinder også Font Awesome Pro: indsæt dit Kit ID under Elementor > Indstillinger > Integrationer, og klik på Validate Kit ID for at tilføje Pro-typografierne til vælgeren.
• Master Addons Icon Library-udvidelsen tilføjer 8 ikonpakker med 5.344 ikoner til den samme popup, og Feather Icons, Remix Icon og Teenyicons i det sæt kræver Master Addons Pro.

Du kan tilføje brugerdefinerede ikoner i Elementor tre måder: uploade en SVG i ethvert ikonfelt, importere din egen ikon skrifttype med Elementor Pro, eller slå ekstra ikon pakker fra Master Addons. Alle tre ender i samme Icon Library popup, som kun tilbyder Font Awesome indtil du tilføjer noget til det.

Denne guide går gennem hver metode med de nøjagtige indstillinger for at klikke, og sammenligner dem derefter i en tabel, så du kan vælge den rigtige. Derefter dækker det styling (farve, størrelse og hover) og de problemer, folk rammer oftest, som ikoner, der vises som tomme firkanter.

Tre måder at tilføje brugerdefinerede ikoner i Elementor

Metoden, der passer, afhænger af, hvor mange ikoner du har brug for, og om du allerede har dem som filer.

• For et eller to ikoner, såsom et logomærke, uploades SVG'en direkte til ikonfeltet (metode 1).
• For dit eget mærkesæt skal du importere det som en ikonskrifttype med Elementor Pros brugerdefinerede ikoner (metode 2).
• For et stort udvalg af færdige ikoner uden noget at uploade, skal du tænde for ikonpakkerne i Master Addons (metode 3).

Du kan blande alle tre på én side. En uploadet SVG, et Custom Icons sæt, Font Awesome og en Master Addons pakke kan alle sidde på samme side, fordi hver enkelt er blot en anden kilde til det samme ikonfelt.

Metode 1: Elementors indbyggede Icon Library og SVG upload

Hver Elementor-widget med et ikonfelt åbner den samme Icon Library-popup, uanset om det er Icon, Icon Box, Icon List, Button eller Social Icons. Ud af boksen, som popup viser Font Awesome i tre sæt: Regular, Solid og Brands.

1. Tilføj en ikon-widget eller en hvilken som helst widget med et ikon til din side.
2. Hold markøren over ikoneksemplet under fanen Indhold. Der vises to knapper: Ikonbibliotek og Upload SVG.
3. Klik på Ikonbibliotek for at vælge et Font Awesome-ikon eller Upload SVG for at bruge din egen fil.

Upload SVG er den hurtigste måde at tilføje et enkelt brugerdefineret ikon, som en klients logomærke. WordPress blokerer SVG-uploads som standard, så hvis Elementor nægter filen, skal du slå Aktivér ufiltrerede filuploads til under Elementor > Indstillinger > Avanceret. Gør kun det, hvis du stoler på alle, der kan uploade filer til webstedet, da en SVG kan bære kode.

Hver SVG er sin egen upload, uden sæt til at gennemse eller søge senere. Elementors Icon Library hjælpeartikel bemærker også, at Accordion og Toggle widgets bruger små inline ikon kontrolelementer i stedet for den sædvanlige forhåndsvisning, men de åbner den samme popup. Når du har brug for mere end en håndfuld ikoner, sparer de næste to metoder tid.

Metode 2: Upload et ikonsæt med Elementor Pro Custom Icons

Elementor Pro kan indlæse din egen ikon skrifttype i plukkeren som en separat fane. Det accepterer .zip-filer eksporteret fra Fontello, IcoMoon eller Fontastic, så du kan bygge et sæt fra dit brands SVG'er og holde det på ét sted.

1. Byg dit sæt i Fontello, IcoMoon eller Fontastic og download det som en .zip-fil.
2. I WordPress skal du åbne Elementors brugerdefinerede ikoner-skærm. I Elementor 4 er der en genvej til den på Elementor-startskærmen.
3. Klik på Tilføj nyt ikonsæt, slip .zip-filen ind, navngiv sættet og udgiv det.
4. Åbn et hvilket som helst ikonfelt i editoren. Dit sæt vises under Mine biblioteker i popup-vinduet Ikonbibliotek.

Elementors egen Brugerdefinerede ikoner guide viser eksporttrinnene for hver tjeneste, herunder det unikke CSS-præfiks, som hvert sæt har brug for. Fangsten med denne rute er vedligeholdelse: du opretter eller køber sættet først, og uploader det igen, hver gang det ændres.

Connect Font Awesome Pro

Elementor Pro forbinder også et Font Awesome Pro abonnement. Gå til Elementor > Indstillinger > Integrationer, indsæt dit Font Awesome Pro Kit ID og klik på Validate Kit ID. Pro familierne dukker derefter op i plukkeren ved siden af standard Font Awesome sæt.

Metode 3: Tilføj 8 ikonpakker med Master Addons

The Master Addons ikon bibliotek udvidelse tilføjer otte komplette ikonpakker, 5.344 ikoner i alt, til Icon Library popup. Intet bliver uploadet: du skifter en pakke til, og dens ikoner vises i hvert ikonfelt på webstedet.

Opsætning tager tre trin:

1. Gå til Mastertilføjelser > Indstillinger > Udvidelser, klik på filteret Ikonbibliotek, tænd for de pakker, du ønsker, og klik på Gem ændringer.

2. Åbn et hvilket som helst ikonfelt i Elementor, og klik på Icon Library. De nye pakker sidder under Mine biblioteker, hver med et lille “M”-mærke.
3. Klik på en pakke for at gennemse den, eller skriv i Filtrer efter navn for at søge i hver pakke på én gang. Vælg et ikon, og klik på Indsæt.

Elementors egen ikonskrifttype (eicons) er ikke i standardvælgeren. Master Addons tilføjer alle 398 eicons som en fane, hvilket hjælper, når du vil have ikoner, der matcher Elementor-grænsefladen. Feather Icons, Remix Icon og Teenyicons leveres med Master Addons Pro.

Brug Remix Icon til åbne og lukkede tilstande

De fleste Remix Icon figurer kommer i en linjeversion og en udfyldningsversion. Det gør det til et godt match for widgets med to ikontilstande: i Avanceret Accordion widget, eller Elementors egen harmonika og skift, indstil omridset som det lukkede ikon og den udfyldte figur som det åbne ikon.

Opsætningsdetaljer, CSS-klassepræfikset for hver pakke og rettelser til almindelige problemer er i Ikon Bibliotek indstillinger docs.

Hvilken metode skal du bruge?

Den rigtige metode afhænger af, hvad du allerede har.

Den sidste række er for folk, der bygger deres egne widgets. Den Ikoner kontrol i Widget Builder åbner den samme popup, så brugerdefinerede widgets kan bruge hver pakke, du har slået til.

Sådan styles ikoner i Elementor

Ikoner fra alle disse kilder bruger widgettens normale typografikontroller. Åbn fanen Stil, udvid sektionen Ikon, og indstil den primære farve, størrelse og rotation. Skift til fanen Svæver for at ændre farven, når en besøgende peger på ikonet.

Skrifttypeikoner tager den farve, du indstiller. Det dækker Font Awesome, Custom Icons-sæt og Master Addons-pakkerne. En uploadet SVG ændrer kun farve, hvis dens stier ikke bærer en fast fyldning af deres egen, så strip hårdtkodede fyldværdier fra filen, før du uploader den.

De samme kontroller vises også i andre ikon-widgets. Den Infoboks widget parrer et ikon med en titel og tekst, og vores guide til animerede knapper i Elementor viser, hvordan du placerer et ikon inde i en knap og giver det sin egen svævefarve.

Fejlfinding Elementor ikoner

De fleste ikonproblemer kommer ned til en skrifttypefil, der ikke indlæses, eller en indstilling, der ikke blev gemt.

Ikoner vises som tomme firkanter

Ikonskrifttypen indlæses ikke. Ryd Elementors cache under Elementor > Værktøjer > Generelt (Ryd filer og data), og ryd derefter dit caching-plugin og CDN. Hvis dine skrifttyper indlæses fra et CDN på et andet domæne, skal du kontrollere, at det tillader anmodninger om skrifttypefiler på tværs af oprindelse.

Elementor vil ikke acceptere min SVG

Slå Aktivér ufiltrerede filuploads til under Elementor > Indstillinger > Avanceret, og prøv derefter uploaden igen. Hvis den stadig mislykkes, skal du åbne SVG'en i en teksteditor og kontrollere, at det er en rigtig SVG-fil og ikke en PNG med en .svg-udvidelse.

En Master Addons-pakke mangler fra plukkeren

Kontroller, at pakkens switch er tændt under Master Addons > Indstillinger > Udvidelser > Ikonbibliotek, og at du klikkede på Gem ændringer, og genindlæs derefter editoren. Feather Icons, Remix Icon og Teenyicons har også brug for Master Addons Pro med en aktiv licens.

Ikonskrifttyper sænker siden

Hver ikon skrifttype er en fil mere for browseren at downloade. Hold dig til en eller to pakker for et ensartet udseende, og læs vores guide til fremskyndelse af Elementor-websteder, som dækker Elementors Inline Font Icons mulighed for gengivelse af ikoner som SVG i stedet for skrifttypefiler.

Ofte stillede spørgsmål

Endelige tanker

Tilføjelse af brugerdefinerede ikoner i Elementor kommer ned til, hvor dine ikoner starter. En enkelt SVG går direkte ind i ikonfeltet. En brandikonskrifttype går ind gennem Elementor Pros brugerdefinerede ikoner, ved siden af Font Awesome Pro, hvis du har et sæt. Og hvis du hellere vil vælge end uploade, sætter de otte Master Addons-pakker 5.344 flere ikoner i den samme popup.

For at se hver pakke med prøver og ikontællinger, før du tænder noget, skal du gennemse Elementor ikon bibliotek page.

Relateret læsning

• Ikon Bibliotek indstillinger: switches, CSS-præfikser og fejlfinding for alle otte pakker
• Ikoner kontrol i Widget Builder: brug pakkerne i dine egne brugerdefinerede widgets
• Sådan tilføjes et Font Awesome-ikon til en Contact Form 7-indsendelsesknap
• Alle Master Addons widgets og udvidelser