Ikony Font Awesome

Font Awesome je populární sada vektorových ikon, které lze snadno použít na webových stránkách jako písma. To má několik výhod: ikony jsou vektorové (takže vypadají skvěle na jakékoli velikosti), dají se stylovat pomocí CSS (měnit barvu, velikost, přidávat stíny jako u běžného textu) a jsou velmi lehké.

Jak integrovat Font Awesome

Nejsnadnější způsob integrace je přes CDN (Content Delivery Network) pomocí speciálního "kitu":

Navštivte web Font Awesome (fontawesome.com).
Zaregistrujte se (zdarma) a vytvořte si svůj "kit".
Zkopírujte vygenerovaný <script> tag a vložte jej do sekce vašeho HTML dokumentu.

<head>
    <!-- Toto je příklad, váš kit kód bude jiný -->
    <script src="https://kit.fontawesome.com/VASE_CISLO_KITU.js" crossorigin="anonymous"></script>
</head>

Používání ikon v HTML

Jakmile máte kit propojený, můžete ikony používat v HTML pomocí značky <i> nebo <span> a specifických tříd Font Awesome. Ikony najdete v galerii na webu Font Awesome.

<!-- Ikona domu -->
<i class="fas fa-home"></i>

<!-- Ikona koše -->
<i class="fas fa-trash-alt"></i>

<!-- Větší ikona s barvou -->
<i class="fas fa-star" style="font-size: 2em; color: gold;"></i>

Stylování ikon pomocí CSS

Jelikož jsou ikony Font Awesome ve skutečnosti písma, můžete je stylovat pomocí standardních vlastností CSS pro písma:

/* Změna barvy */
.fa-home {
    color: #3498db;
}

/* Změna velikosti */
.fa-trash-alt {
    font-size: 24px;
}

/* Při najetí myší */
.fa-star:hover {
    color: #f1c40f;
    transform: scale(1.2); /* Animace zvětšení (viz dále sekce Transformace) */
    transition: transform 0.3s ease;
}

Ikony můžete také snadno vkládat do odkazů nebo tlačítek, aby byly interaktivní.

<a href="#"><i class="fas fa-arrow-circle-right"></i> Přejít dál</a>