Ikoner

Feltet Ikoner føjer Elementors ikonvælger til en brugerdefineret widget, der er bygget med Master Addons Widget Builder. Redaktører vælger et ikon fra Icon Library eller uploader deres egen SVG, og din skabelon udskriver det. Brug det til funktionslister, infobokse, knapper, sociale links og andre steder hjælper et lille symbol.

Ikoner er et Pro-felt. Det gratis plugin indeholder en begrænset Widget Builder, og det fulde sæt felter leveres med Master Addons Pro.

Hvad Ikoner feltet gør #

• Det tilføjer en ikonboks til din widgets panel i Elementor, med knapper til ikonbiblioteket og til upload af en SVG.
• Ikonbiblioteket inkluderer Font Awesome og de ekstra ikonsæt, der følger med Master Addons, såsom Elementor Icons, Simple Line Icons, Linear Icons og Material Icons.
• Marken gemmer på to ting: value (ikonets CSS-klasse, eller SVG-filen for en upload) og library (hvilket sæt det kom fra).
• Din skabelon udskriver en <i> tag for biblioteksikoner og en <img> tag for uploadede SVG'er.

Hvis du ikke har bygget en widget endnu, så læs Widget Builder oversigt først.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor og Master Addons Pro, begge aktive. Den installationsvejledning covers opsætning.
• En widget åben i Widget Builder. Eksemplet i denne vejledning er en “Feature List” widget: et Ikoner felt navngivet feature_icon og et Tekstfelt til titlen.

Sådan tilføjes et ikonfelt #

1. Gå til Master Addons > Widget Builder og åbn din widget.
2. På tilfreds tab, tilføj en sektion, for eksempel “Funktion”.
3. skrift icons i feltsøgefeltet til venstre.
4. vod Ikoner ind i sektionen. Dens indstillinger åbnes i venstre sidebjælke.

Ikoner feltindstillinger forklaret #

• skilt er teksten over ikonboksen i Elementor, for eksempel “Feature Icon”.
• ry er feltets unikke ID og starten på dets tokens, så feature_icon giver {{ feature_icon.value }}. Kun bogstaver, tal og understregninger.
• art vises under kontrol i Elementor.
• hud tilbyder Inline og Media. Det ændrer, hvordan bygherrens egen forhåndsvisning tegner feltet. I vores test viste Elementor den store ikonboks på begge måder.
• Standardværdi er ikonet en ny kopi af widget starter med. Klik Skift ikon for at vælge en, eller det lille kryds for at rydde den. Uden standard sæt, starter feltet med Elementor logo ikonet.

Skift ikon åbner Master Addons Icon Picker. Vælg et sæt til venstre, søg efter navn, klik på et ikon og derefter Indsæt.

Udskriv ikonet i din skabelon #

{{ feature_icon }} på sine egne udskrifter intet, fordi feltet holder to værdier. Brug sine dele i stedet:

• {{ feature_icon.value }} er ikonklassen for et biblioteksikon, som f.eks eicon eicon-check. For en uploadet SVG udskriver den filens URL.
• {{ feature_icon.library }} er det indstillede navn, som f.eks eicons, simple-line-icons eller svg til en upload.
• {{ feature_icon.value.url }} er SVG's URL, når biblioteket er svg.

Redaktører kan vælge begge slags, så tjek biblioteket og udskriv det rigtige tag. Pak det hele ind i en check for en tom værdi, så intet udskrives, når ikonet fjernes:

{% if feature_icon.value %}
  <span class="feature-icon">
    {% if feature_icon.library == 'svg' %}
      <img src="{{ feature_icon.value.url }}" alt="">
    {% else %}
      <i class="{{ feature_icon.value }}" aria-hidden="true"></i>
    {% endif %}
  </span>
{% endif %}

Biblioteksikoner er skrifttypeglyffer, så de tager color og font-size af elementet omkring dem. En uploadet SVG i en <img> tag beholder sine egne farver, så størrelse det med width og height i CSS-fanen.

Klik Gem indstillinger når du er færdig.

Brug ikonkontrollen i Elementor #

Føj widgetten til en side, eller genindlæs editoren, hvis siden allerede var åben. Ikonboksen viser det aktuelle ikon. Hold markøren over det for at se Ikon bibliotek og Upload SVG, og et papirkurvsikon til at fjerne ikonet.

Ikon bibliotek åbner Elementors ikonvindue. Vælg et sæt til venstre, filtrer efter navn, klik på et ikon og klik Indsæt. Upload SVG åbner Mediebiblioteket, så du kan uploade eller vælge en SVG-fil. Elementor kan bede dig om at tillade SVG-uploads første gang.

Font Awesome ikoner og Inline Font Ikoner #

På vores testside viste Elementor Icons, Simple Line Icons og uploadede SVG'er alle på den offentliggjorte side, men det gjorde et Font Awesome-ikon ikke. Elementors Inline skrifttypeikoner funktionen er som standard slået til, og den forhindrer Font Awesome-typografiarket i at indlæse, så <i> tag fra widget forbliver tom. Gå til Elementor > Indstillinger > Funktioner, skal du indstille Inline Font Icons til Inaktiv og gem. Font Awesome ikonet dukkede derefter op. Hvis du hellere vil beholde den funktion på, skal du bruge de andre ikonsæt eller en SVG upload.

Almindelige brugstilfælde #

• Funktionslister og infobokse med et ikon ved siden af hver overskrift.
• Knapper med et foranstillet eller efterfølgende ikon.
• Sociale links, kontaktoplysninger og listekugler.
• Mærkemærker, ved at uploade logoet som en SVG.

Tips til at arbejde med feltet Ikoner #

• Håndter altid begge sager i skabelonen: <i> til biblioteksikoner og <img> til SVG-uploads.
• Vagt med {% if feature_icon.value %} så et tomt ikon efterlader ikke en tom indpakning.
• Indstil en Standardværdi, der passer til widgetten, så den aldrig viser Elementor-logoet ved et uheld.
• Style indpakningen, ikke ikonmærket, så begge ikontyper sidder i samme boks.
• Tjek et Font Awesome-valg på live-siden, før du stoler på det (se afsnittet ovenfor).
• For billeder frem for ikoner, brug Mediefelt.

Ofte stillede spørgsmål #

Indpakning #

Tilføj feltet Ikoner, indstil et standardikon, og udskriv det med en skabelon, der håndterer både biblioteksikoner og SVG-uploads. Marker Skrifttype Awesome-valg på den udgivne side, og sluk for Inline Font Icons, hvis de kommer ud tomt. For andre fanefelter for indhold, se URL og Vælg felter, og tjek prissætning for hvad hver plan indeholder.