Lidi přirozeně přitahuje vizuální podoba a Webové stránky WordPress, stejně jako je přitahuje psaný obsah, který sdílíte. Ve skutečnosti podle Jeff Bullas ", Články s obrázky mají o 94% více zobrazení než články bez obrázků.

To je obrovský nárůst počtu zobrazení stránky, pokud se mě zeptáte.

A co přesně je to důvod?

Stačí do svého obsahu přidat několik vysoce kvalitních obrázků souvisejících s články.

Ale co ty obrázky na vašem Webové stránky které přesahují snímky obrazovky a fotografie? A co obrázky, které nejen upoutají pozornost, ale plní i užitečnou funkci?

Ano, mluvím o ikonách. Ty drobné obrázky, které se nacházejí na webových stránkách, podporují sdílení na sociálních médiích, ilustrují kontaktní stránky vlastníků firem a jmenují několik případů použití.

Vzhledem k tomu, že myšlenka byla převzata z této stránky, Návštěvníci nejenže je přitahovaly obrázky na webových stránkách, ale měli sklon s nimi interagovat, lidé je začali přidávat na své webové stránky.

Jak ale technologie pokročila, tradiční obrazové ikony začaly jako vždy obrazové řešení pro webové stránky ochabovat. Je to proto, že dělají stránky mnohem těžšími a proto pomalejšími, ale především toto řešení nebylo vždy vhodné pro mobilní telefony.

Existuje však řešení: fonty ikon.

Dnes vám řeknu, co jsou to ikonová písma a jaké jsou výhody jejich používání na vašem webu WordPress. Dále vám ukážu, jak přidat ikonová písma na váš web WordPress pomocí populárního pluginu „ Lepší Font Děsivý ".

Tak začněme.

Co jsou to ikonová písma a proč byste je měli používat?

Ikonová písma jsou přesně to, co říkají: písma zabudovaná zcela do ikon. Ve skutečnosti ikonová písma nebo „ make-icon Msgstr "Lze popsat jako písmo, které zobrazuje pouze znaky nebo symboly, nikoli písmena a čísla, ke kterým jsou přidružena tradiční písma a text.

Písmo ikony WordpressIkonová písma se používají k zobrazení běžně používaných symbolů na vašem webu. Například tlačítka sociálních médií, váš košík, tlačítka pro stahování a navigační tlačítka jsou příklady ikon, které na vašem webu zobrazují malé interaktivní obrázky.

Fonticone na webových stránkách

Proč používat ikonová písma?

Ikony obrázků v minulosti fungovaly dobře pro mnoho majitelů stránek. S vývojem pravidel navigace, použitelnosti a designu se však písma ikon stala nejlepším řešením pro zobrazování interaktivních obrázků na webové stránky.

Zde je přehled několika přesvědčivých důvodů, proč jsou ikonová písma tou nejlepší volbou:

  • Snadno se rozšiřuje bez ztráty kvality
  • Přizpůsobitelné z hlediska barvy a stínu
  • 100% reagující
  • Funguje jako spritové obrázky CSS, ale chová se jako text
  • Snadné použití
  • Kompatibilní s prohlížeči
  • Přizpůsobte neprůhlednost, rotaci a další
  • Menší velikost souboru
  • Neomezujte rychlost nebo výkon vašeho webu

Jak vidíte, existuje několik důvodů, proč byste na své webové stránce mohli chtít použít ikonové písmo, na rozdíl od grafické ikony.

Instalace ikon písem na váš web pomocí pluginu

Better Font Awesome je a WordPress Plugin freeware, který vám umožňuje automaticky integrovat nejnovější verzi Font Awesome do vašeho projektu WordPress. Navíc přichází s CSS, krátkými kódy a generátorem krátkých kódů TinyMCE.

Tento plugin má pro majitele stránek řadu užitečných funkcí:

  • Rutinná aktualizace nejnovější verze
  • Schopnost přepínat mezi verzemi písma Awesome beze změny krátkých kódů
  • Podpora dalších populárních pluginů pro písma včetně jejich krátkých kódů
  • Vydal jsDelivr CDN

Krok 1: Instalace a aktivace lepšího písma Awesome

Nejprve si nainstalujte a aktivujte plugin „Better Font Awesome“ prostřednictvím řídicího panelu WordPress, stejně jako u jakéhokoli jiného pluginu.

Nejprve přejděte na „ Pluginy> Přidat nové A hledat „ Lepší Font Děsivý ".

Lepší instalace a aktivace úžasného pluginu

Pak vyberte „ nainstalovat nyní »A klikněte na« aktivovat ".

Po aktivaci plugin přidá odkazLepší Font DěsivýV nabídce Nastavení na hlavním panelu WordPress.

Lepší písmo, skvělá položka nové položky nabídky

Krok 2: Konfigurace nastavení pluginu

Konfigurace pluginu « Lepší Font Děsivý ", Začněte kliknutím na položku nabídky" Lepší Font Děsivý V části Nastavení. Jakmile to uděláte, zobrazí se obrazovka podobná této:

Lepší nastavení konfigurace úžasného pluginuZde můžete provést následující kroky:

  • Verze: Vyberte verzi „Better Font Awesome“, kterou chcete použít.
  • Použijte Minified CSS: Zaškrtněte toto políčko, pokud chcete použít zkrácenou verzi CSS.
  • Odstraňte stávající tiskové písmo: Zaškrtněte toto políčko a pokuste se odstranit kódované úryvky a zkrácené kódy přidané jinými doplňky a motivy.
  • Skrýt administrátorské recenze: Skrýt výchozí varování správce, která se zobrazí, když dojde k chybám API a CDN.

Kromě minimálního množství možností Better Font Awesome existuje malá část „Usage“, která vysvětluje, jak přidat ikony na váš web.

Používání lepšího pluginu s úžasným písmem

Krok 3: Přidávání ikon na váš web

Existují tři snadné způsoby, jak přidat ikony na web pomocí aplikace „Better Font Awesome“ - pomocí zkráceného kódu, HTML nebo TinyMCE.

# 1. Přidávání ikon pomocí zkráceného kódu

Chcete-li na svůj web přidat ikony pomocí zkráceného kódu, nejprve přejděte na stránku „ Písmo Děsivý Chcete-li zobrazit úplný seznam dostupných ikon, které lze použít.

Zde můžete vyhledat požadovanou ikonu. Chcete-li například ikonu „e-mailu“, jednoduše vyhledejte dané klíčové slovo a kliknutím na ikonu vyberte ikonu, kterou chcete použít.

Hledejte ikonu na fontawesomePo kliknutí na ikonu, kterou chcete přidat, uvidíte obrazovku zobrazující obrázek ikony s různými velikostmi a malým blokem kódu:

Ikona písma se všemi jeho velikostmiStačí zkopírovat blok kódu a vložit jej kdekoli na svůj web pomocí karty „Textový editor“. Takto bude editor vypadat na vašem webu:

Editor kódu s ikonami na WordPressuEditor kódu s ikonami na WordPressuNa konci, zde je to, co Návštěvníci uvidí, když vstoupí na váš web:

Výsledek plakátu ikony Wordpress
# 2. Přidávání ikon pomocí HTML kódu

Jak jsme viděli v sekci „ Využití Máte možnost použít HTML kód k vložení ikon na váš web. Vývojáři pluginů však berou v úvahu, že používání HTML vyžaduje předpony specifické pro verzi.

Proto vám místo toho doporučují používat zkrácené kódy. Pokud však chcete použít HTML kód, Font Awesome má užitečné informace zde.

# 3. Přidávání ikon pomocí TinyMCE

Toto je pravděpodobně nejjednodušší způsob přidání ikon na váš web. V režimu „Vizuální editor“ stačí kliknout na ikonu Vložit. Odtud můžete procházet dostupné možnosti ikon nebo zúžit výsledky pomocí funkce vyhledávání.

Tlačítko pro vyhledávání ikon vizuálního editoru Wordpress

Jakmile najdete požadovanou ikonu, jednoduše na ni klikněte. Generátor krátkých kódů automaticky zadá požadované informace do vašeho příspěvku nebo stránky.

Pokud se chcete naučit, jak přizpůsobit ikony na vašem webu, podívejte se na příklady „ Písmo Děsivý ".