Deight.eu

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!