Jak použít ve WordPressu Font Awesome

Ikonky jsou nedílnou součástí každého webu. Nejpoužívanější řešení pro jejich vkládání do stránky je Font Awesome. Ukážeme si, jak na to.

Na začátku byl takzvaný ikonofont. Tedy webfont, který místo znaků obsahoval speciální symboly – ikony.

Každá ikonka má svůj specifický kód a díky css pseudoelementu :before se na místě htm tagu <i> zobrazí vybraná ikona.

Výhodou je jednoduché vkládání ikon do obsahu a jejich použití v designu.

V současné době je FontAwesome ve verzi 6, ale běžně se používá verze 5 a nižší.

Způsob použití se dá rozdělit do dvou částí – použití fontu a svg.

Jak FontAwesome funguje?

Nejprve si musíme říci, jak se ikony zobrazují v kódu. V podstatě máte na výběr dva elementy a to i a span. Těm dáte css třídy, které se postarají o přiřazení odpovídajícího stylu ikony. Vypadá to třeba takto:

<i class="fas fa-user"></i>
<span class="fas fa-user"></span>

Pozor na to, že od verze 5 se změnila třída fa. Starší verze totiž používali tuto třídu a pokud vaše šablona vkládá stylopis pro verzi 4 a máte v kódu ikony takto:

<i class="fa fa-user"></i>
<span class="fa fa-user"></span>

tak při aktualizaci stylopisu se vám ikony mohou přestat zobrazovat. Důvod , proč se třída změnila je jednoduchý. Označuje totiž font family a těch je od verze 5 poněkud více:

• fas – výchozí font family, osobně bych ikonám přiřadil řez bold – 700.
• far – regular řez ikon – 400
• fal – light verze – 300
• fad – duotone verze ikon, má barevné odstíny
• fab – brandové ikony

Ve free verzi máte k dispozici jen fas a fab, ostatní jsou již součástí premium verze.

Takto vypadá vykreslená ikona.

Pokud se držíme toho, že zatím používáme font, každý element, která má třídu fas, má přiřazen font-family „FontAwesome“ a třída fas-user definuje, co se bude zobrazovat. Kód po vykreslení by měl vypadat nějak takto:

.fas{
    font-family:"FontAwesome";
}
.fa-user:before{
    content:'\f406';
}

Je to zjednodušené, ale vidíte, že pseudoelement :before má přiřazen content – unicode té konkrétní ikony. Díky tomu, že se jedná o font, můžete tříde .fa přidávat css, jako je barva, font-size a další. Na font-weight ikona reagovat nebude.

Protože se jedná o html tag i, můžete i jemu přidat vlastní třídu a upravit tak vzhled pro ikonu v konkrétním umístění:

<i class="fas fa-user header-account-icon"></i>
<span class="fas fa-user header-account-icon"></span>

Vložení FontAwesome do šablony

Co musí každý vývojář udělat úplně na začátku, je načíst css samotného fontu.

Dříve se používalo vkládání z url, jako například takto:

https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Samozřejmě, mohli jste si styly uložit i na vlastním serveru, což jsem nikdy nedělal, protože CDN jsou většinou výhodnější.

Aktuálně vám po zaregistrování systém ve FontAwesome vytvoří embed script, který můžete používat napříč všemi vašimi weby:

<script src="https://use.fontawesome.com/7eafb69b9a.js"></script>

Samozřejmě, že ve WordPressu musíte použít funkci wp_enqueue_script, díky níž vložíte script do stránky. Nezapomeňte na použití atributu defer.

A to je vše, můžete začít používat font. Díky tomu, že to je vlastně velmi snadné, používá se font velmi často a může se vám stát, že jej bude načítat více pluginů, Pozor i na starší verze.

Pro ty co nechtějí, nebo neumí programovat, je zde oficiální plugin pro vložení fotu do stránky https://wordpress.org/plugins/font-awesome/

FontAwesome ikony jako svg

Použití fontu je trochu problematické v tom, že se musí načítat další externí zdroj a tím se snižuje rychlost stránky. Ne nijak významně, ale každý request se počítá.

Pokud tedy děláte šablonu, kde bude jen několik málo ikon, nebo umíte pracovat s svg sprity, můžete využít toho, že FontAwesome svg umí.

U každé ikony si můžete stáhnout svg soubor s kterým pak můžete dále pracovat. U menší projektů, kde je málo ikon, vkládám svg kód přímo do html, u větších používat sprity.

FontAwesome svg sprite

Při použití spritů si stáhněte celý FontAwesome balíček a ve složce sprites najdete připravené sprity. Ty načtěte do šablony a v kódu pak stačí použít následující zápis:

<svg>
    <use xlink:href="solid.svg#user"></use>
  </svg>

To co je za odrážkou, je identifikace ikony. Protože opět platí, že velikost souborů a počet requestů je to co se počítá, pro menší projekty je lepší si vygenerovat vlastní sprite s vybranými ikonami.

A protože není nic lepšího než využít již hotové nástroje, můžete použít balíček pro node.js, jenž vám generování takového spritu umožní – https://www.npmjs.com/package/fontawesome-svg-sprite-generator

Závěr

FontAwesome a jiné ikono fonty jsou skvělé v tom, že vám umožní přidávat jednoduše ikony do webové stránky. I tady ale platí, že pokud používáte nějaký z builderů, jako Divi, Elementor a další, nemáte moc vliv na to, jak se bude FontAwesome používat. Všechny ty připravené moduly používají většinou font. Také si dejte pozor na to, aby vám pluginy a buildery nevkládali každý svou vlastní verzi fontu, pak zjistíte, že máte na stránce tři naprosto zbytečné requesty.