Jedná se o nejpoužívanější a velmi slavnou banku ikon, které lze i zdarma použít na webu pro obohacení webu a hlavně pro lepší navigaci lidí i přes jazykovou bariéru, obrázům totiž rozumí každý.
Jak si takové ikony přidat na web?
Není to nic složitého, základní jsou dvě cesty:
1. Stáhnout a nainstalovat na web
- Stažení základní banky ikon můžete vždy udělat na oficiálních stránkách: FontAwesome.com (aktuálně verze 5.15)
- Nyní nahrajte složku na tvůj server přes FTP nebo jiným způsobem. Tip: Zvolte ideálně zasložkování mezi ostatní data jako css styly a fonty.
- Instalaci provedete přidáním volajícího řádku stylu:
<link href="/vaše_cesta/css/all.css" rel="stylesheet"> <!--load all styles -->- Nyní už jen přidávejte ikony na web, jak na to čtěte níže.
2. Druhý postup je velmi podobný, ale bez toho, aniž bysme museli vše stahovat a vkládat na server.
- Na webu vyplníte email a systém Vám zašle instrukce o aktuální verzi a jak jej instalovat, což je stejné jako dříve, tedy kód vložíte do hlavičky webu nebo konkrétní stránky kde chcete ikony zobrazovat.
- Odkaz na zaslání
Hotovo, nyní jdeme přidávat ikony na váš web.
3. Vkládání ikon
- Výše uvedený řádek je all.css – tedy tím použijete všechny dostupné ikony, ty najdete v Databázi ikon. (Pozor jen tmavé ikony v databázi jsou zdarma, ty světlé jsou placené.)
- Nyní stačí už jen ikonu zavolat, nejsnazší způsob pro začátečníky je vyhledat ikonu v databázi a nad ní si zkopírovat její „span“ viz níže.
<i class="fab fa-angellist"></i>
- Pokud nyní vložíte tento kód na web do zdrojového kódu s nainstalovaným stylem v hlavičce webu, tato ikona se objeví. Upravit ji lze klasickým způsobem přes CSS jako by byla součást textu.
TA DÁ – v případě problému ještě mrkněte níže nebo mi napište.
Řešení problémů
Jak aktualizovat již funkční Font Awesome na vyšší verzi?
Občas můžete najít ikonu v databázi, ale při přidání ikony do kódu se nezobrazí. Ostatní ikony ale ano.
Znamená to, že ikona byla přidána až ve vyšší verzi a tak je potřeba volat nový css styl, aby obsahoval i novou ikonu.
Kompletní návod jak přejít správně z jedná verze na druhou je vždy s novou verzí vydán, aktuálně přechod z verze 4 na verzi 5 naleznete zde: FontAwesome.com
Nejdůležitějším krokem kdyby nastaly komplikace je přidání i kódu „shim„, ten je vždy vydán, aby řešil kolize mezi verzemi a tedy aby fungovaly i všechny staré ikony a vy jste nemuseli na celém webu kód ikon upravovat, což je často nemožné.
Příklad:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/v4-shims.css">Ikony se mi přestaly z ničeho nic zobrazovat
Tento problém má téměř vždy souvislost s použitím druhého kroku přidání, tedy při použití externího zdroje na Váš web. Externí zdroj CSS již není funkční nebo byl změněn a tak je potřeba použít jeho funkční verzi, tu najdete na oficiálním webu, pokud potřebujete například starší verzi 4.7 tedy všechny ikony z verze 4 najdete je stále zde.
Psal jsem téměř a tak se může i stát, že i když jste použili první způsob, tedy CSS FA načítáte ze svého serveru, zkontrolujte ho, je možné že vy sami nebo nějaký proces data FA vymazal a tak je potřeba obnovit napojení. Velmi rychle problém najdete pomocí konzole pro webmastery u svého webu.
Nevíte-li si rady zeptejte se v komentářích nebo mi napište!