Ljudi su prirodno privučeni vizualnim izgledom a web stranica WordPressa, onoliko koliko ih privlači pisani sadržaj koji dijelite. Zapravo, prema Jeff Bullas ", Članci sa slikama imaju 94% više pregleda od članaka bez slika.

To je ogroman porast broja pregleda stranica ako mene pitate.

I što je točno razlog?

Samo dodajte nekoliko visokokvalitetnih slika relevantnih za članak u vaš sadržaj.

Ali što je sa slikama na vašem web stranica koji nadilaze snimke zaslona i fotografije? Što je sa slikama koje ne samo da privlače pažnju, već imaju i korisnu funkciju?

Da, govorim o ikonama. Znate one male slike koje se nalaze na web stranicama kako bi potaknule dijeljenje na društvenim mrežama, ilustrirale kontakt stranice vlasnika poduzeća i nabrojili neke slučajeve korištenja.

Kako je ideja preuzeta s ove stranice, the posjetitelji ne samo da su ih privlačile slike na web stranicama, već su bili skloni interakciji s njima, ljudi su ih počeli dodavati na svoje web stranice.

Ipak, kako tehnološki napreduje, kao i uvijek, tradicionalne ikone slika počele su posustajati kao rješenje slike za web stranice. To je zato što čine stranice puno težim, a samim time i sporijima, ali prije svega ovo rješenje nije uvijek bilo prikladno za mobilne uređaje.

Ali postoji rješenje: fontovi ikona.

Danas ću vam reći što su fontovi ikona i prednosti njihove upotrebe na vašoj WordPress stranici. Pored toga, pokazat ću vam kako dodati fontove ikona na vašu WordPress stranicu pomoću popularnog dodatka " Bolje slova strašan ".

Dakle, krenimo.

Što su fontovi ikona i zašto biste ih trebali koristiti?

Fontovi ikona upravo su ono što kažu: fontovi u potpunosti ugrađeni u ikone. Zapravo, fontovi ikona ili " make-ikona "Može se opisati kao font koji prikazuje samo znakove ili simbole, a ne slova i brojeve s kojima su povezana tradicionalna slova i tekst.

Fontovi ikona koriste se za prikaz uobičajenih simbola na vašoj web lokaciji. Na primjer, gumbi na društvenim mrežama, vaša košarica, gumbi za preuzimanje i gumbi za navigaciju primjeri su ikona koje na vašem web mjestu prikazuju malene interaktivne slike.

Zašto koristiti fontove ikona?

Ikone slika dobro su funkcionirale u prošlosti za mnoge vlasnike web-mjesta. Međutim, kako su pravila navigacije, upotrebljivost i dizajn evoluirali, fontovi ikona postali su najbolje rješenje za prikaz interaktivnih slika na web stranica.

Evo pogleda na neke uvjerljive razloge zašto su fontovi ikona najbolji izbor:

• Lako se proširuje bez gubitka kvalitete
• Prilagodljiv u pogledu boje i sjene
• 100% osjetljiv
• Radi poput CSS slika, ali se ponaša kao tekst
• Jednostavan za uporabu
• Kompatibilan s preglednicima
• Prilagodite neprozirnost, rotaciju i još mnogo toga
• Manja veličina datoteke
• Nemojte žrtvovati brzinu ili izvedbu svoje web-lokacije

Kao što vidite, postoji nekoliko razloga zbog kojih biste možda htjeli koristiti font ikone na svojoj web lokaciji za razliku od ikone slike.

Instaliranje ikona fonta na vaše web mjesto pomoću dodatka

Better Font Awesome je a WordPress plugin besplatni softver koji vam omogućuje automatsku integraciju najnovije verzije Font Awesomea u vaš WordPress projekt. Štoviše, dolazi s CSS-om, kratkim kodovima i TinyMCE generatorom kratkih kodova.

Ovaj dodatak ima mnoštvo korisnih značajki za vlasnike web lokacija:

• Rutinsko ažuriranje najnovije verzije
• Mogućnost prebacivanja između verzija Font Awesome bez promjene kratkih kodova
• Podrška za druge popularne dodatke za fontove, uključujući njihove kratke kodove
• Izdao jsDelivr CDN

1 Korak: Instalacija i aktiviranje boljeg slova Awesome

Za početak instalirajte i aktivirajte dodatak "Better Font Awesome" putem svoje WordPress nadzorne ploče, baš kao što biste to učinili i s bilo kojim drugim dodatkom.

Prvo se pomaknite do " Dodaci> Dodaj novo I tražite " Bolje slova strašan ".

Zatim odaberite " sada instalirati »I kliknite na« aktivirati ".

Nakon aktiviranja dodatak dodaje vezuBolje slova strašanPod izbornikom Postavke vaše WordPress nadzorne ploče.

Korak 2: Konfiguriranje postavki dodatka

Za konfiguriranje dodatka « Bolje slova strašan ", Započnite klikom na stavku izbornika" Bolje slova strašan Pod Postavke. Nakon što to učinite, vidjet ćete zaslon sličan ovome:

Ovdje možete učiniti sljedeće:

• Verzija: Odaberite verziju "Better Font Awesome" koju želite koristiti.
• Koristite Minified CSS: Potvrdite ovaj okvir ako želite koristiti minificiranu verziju CSS-a.
• Izbrišite postojeći font za ispis: označite ovaj okvir da biste pokušali ukloniti kodirane isječke i kratke kodove koje dodaju drugi dodaci i teme.
• Sakrij recenzije administratora: Sakrij zadana administratorska upozorenja koja se pojavljuju kada se pojave pogreške API-ja i CDN-a.

Pored minimalne količine opcija Better Font Awesome, postoji i mali odjeljak "Upotreba" koji objašnjava kako dodati ikone na svoje mjesto.

Korak 3: Dodavanje ikona na vaše web mjesto

Tri su jednostavna načina za dodavanje ikona na vaše web mjesto pomoću "Better Font Awesome" - putem kratkog koda, HTML-a ili TinyMCE-a.

# 1. Dodavanje ikona pomoću kratkog koda

Da biste na svoje web mjesto dodali ikone pomoću kratkog koda, prvo posjetite " Font Strašan Da biste vidjeli potpuni popis dostupnih ikona koje se mogu koristiti.

Ovdje možete potražiti ikonu koju želite. Na primjer, ako želite ikonu "e-pošta", jednostavno potražite tu ključnu riječ i klikom na nju odaberite ikonu koju želite koristiti.

Nakon klika na ikonu koju želite dodati, vidjet ćete zaslon koji prikazuje sliku ikone s različitim veličinama i malim blokom koda:

Jednostavno kopirajte blok koda i zalijepite ga bilo gdje na web mjestu pomoću kartice "Uređivač teksta". Evo kako će urednik izgledati na vašoj web stranici:

Na kraju, evo što posjetitelji vidjet će kada pristupe vašoj web stranici:

# 2. Dodavanje ikona pomoću HTML koda

Kao što smo vidjeli u odjeljku " Iskorištenost Imate mogućnost korištenja HTML koda za umetanje ikona na vaše web mjesto. Međutim, programeri dodataka uzimaju u obzir da upotreba HTML-a zahtijeva prefikse određene verzije.

Zato preporučuju da umjesto toga koristite kratke kodove. Međutim, ako želite koristiti HTML kôd, Font Awesome ima korisne informacije ovdje.

# 3. Dodavanje ikona pomoću TinyMCE

Ovo je vjerojatno najlakši način za dodavanje ikona na vaše web mjesto. U načinu "Visual Editor" samo kliknite ikonu Umetni. Od tamo se pomaknite kroz dostupne opcije ikona ili suzite rezultate pomoću značajke pretraživanja.

Jednom kad pronađete željenu ikonu, samo je kliknite. Generator kratkog koda automatski unosi potrebne podatke u vaš post ili stranicu.

Ako želite naučiti kako prilagoditi ikone na vašoj web lokaciji, pogledajte primjere " Font Strašan ".