Font Awesome

Jak na Font Awesome

Ikonky jsou populárním doplňkem webu. Nicméně není vždy jednoduché najít takové, které jsou zdarma, mají tu správnou velikost a hodí se do designu webu. Naštěstí je tu skvělé řešení od Dave Grandy, jmenuje se Font Awesome.

Font Awesome umožňuje vkládání vektorových ikon do webu. U ikonek lze upravovat velikost, barvu, stín, prostě cokoliv co umí CSS.

Font Awesome je šířen pod licencí SIL Open Font License (OFL).

SIL Open Font License je svobodná a open source licence vytvořená pro fonty od SIL International určená k použití s některými jejich Unicode fonty. Free Software Foundation považuje tuto licenci za svobodnou.

To znamená, že můžete Font Awesome integrovat do vašich stránek bez nutnosti dávat cokoliv za oplátku, ať už peníze nebo odkaz. To však neznamená, že nemůžete podpořit autora. 🙂

Jak Font Awesome funguje?

Jak už název napovídá, jedná se ve své podstatě o písmo a stejně tak s nim lze zacházet. Můžete jej libovolně zvětšovat nebo zmenšovat, vypadá skvěle na retina zařízeních a ke svému běhu nepotřebuje žádný JS.

Font Awesome obsahuje celkem 519 různých ikonek, ke všem možným příležitostem. Počet ikonek s každou verzí narůstá. Tady je malá ukázka:

Ukázka ikon z Font Awesome
Ukázka ikon z Font Awesome

Celou kolekci ikonek si můžete prohlédnout na oficiálních stránkách projektu.

Co Font Awesome umí?

S Font Awesome pracujete jako s písmem, to znamená, že k jeho stylování používáte CSS. Autor však zabudoval některé třídy přímo do framworku a těch můžete využít.

Různá velikost
fa-lg fa-2x fa-3x fa-4x





Seznamy s ikonkou

Animované ikonky





Další ukázky najdete zde.

Jak integrovat Font Awesome do stránek?

Existuje několik způsobů, jak přidat Font Awesome do stránek.

Díky lidem z MaxCND můžete použít BoostrapCDN a přidat ikonky do webu vložením pouze jednoho řádku kódu. Při této metodě dokonce nemusíte nic stahovat.

Vložte následující kód do webu:

Vlastní CSS

Druhou možností, kterou si tady ukážeme je vložení Font Awesome pomocí vlastního CSS.

Nejprve si stáhněte celý Font Awesome k sobě na disk. Po té ho nahrajte k sobě na hosting.

A nakonec vložte do následující kód:

Poznámka: Je možné, že budete muset upravit cestu k css souboru.

Další způsoby integrace Font Awesome najdete na oficiálních stránkách.

Jak najít ikonku kterou chci?

Poměrně velký obsah ikonek zhoršuje navigaci. Naštěstí lze využít vyhledávač ikonek, do kterého stačí zadat klíčové slovo v angličtině a hned se zobrazí výsledky.

Například pokud hledám telefon, zadám phone.

Vyhledávání ikonek
Vyhledávání ikonek

Nakonec stačí kliknout na ikonku, která se libí a zobrazí se její detail. V detailu najdete náhled ikonky v různých velikostech, její třídu a i přímo kód pro její vložení.

Detail ikonky
Detail ikonky

Osobně jsem Font Awesome použil již na několika různých projektech a rád se k němu vracím. Co na něj říkáte vy?

Správa WordPress webu

Nemusíte na to být sami. Pomůžeme vám s pravidelnou údržbou i novými vylepšeními.

Více informací

11 názorů na “Jak na Font Awesome”

  1. Štěpán

    Dobrý večer, objevil se mi takový menší problém. Když přidám ikonu řekněme třeba “fa fa-user” tak, aby byla vždy před jménem autora článku, tak se změní font u jména autora na jiný než je ten klasický.

    Setkal jste se už někdy s tímto problémem? Jak jste ho popř. řešil?

    Děkuji

  2. Zdravím,
    jakým způsobem tento font přidat do vlastní šablony pro wordpress? Je potřeba to nějak naimportovat jako se importují css styly a js? Jak?

    Díky

    1. Tomáš Cirkl

      Zdravím, návod je napsán v článku výše od nadpisu: “Jak integrovat Font Awesome do stránek?”.

  3. Dobrý den, mám dotaz ohledně použití. Vždy při přepínání z HTML do Editoru a pak zpět mi kódy zmizí. Mám někde něco špatně nastavené? Nebo se s tím musím smířit? Díky za jakékoliv info.. 🙂

  4. Delší dobu již řeším barevnost ikonek, bohužel na webu FA jsem našel pouze examples, které popisujete v článku. Barevnost a velikost větší než fa-5x lze tedy ovlivnit pouze pomocí editace CSS stylů nebo lze generovat konkrétní kód pro konkrétní ikonku přímo na webu FA? Děkuji za odpověď.

    1. Tomáš Cirkl

      Ano, každá ikonka má svou třídu, pomocí které ji můžete upravit přes CSS.

Diskuze

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Nákupní košík

Neuteklo vám něco?

Pokrok a WordPress na nikoho nečekají, tak nám tu raději nechte e-mail, ať o nic nepřijdete!

Zkontrolujte svoji doručenou poštu nebo spam koš, abyste mohli svůj e-mail potvrdit.

Vylaďte WordPress stránky s naším tahákem

V e-booku najdete informace a rady pro WordPress od A do Z. Zadejte e-mail a my vám WordPress tahák pošleme.

Zkontrolujte svoji doručenou poštu nebo spam koš, abyste mohli svůj e-mail potvrdit.

Přejít nahoru