Přidání ikon na stránky pomocí fontu Font Awesome

Úvodní strana

Články

Návody

CSS styly - tipy a rady

Přidání ikon na stránky pomocí fontu Font Awesome

Jednoduchá metoda, kde nemusíš nahrávat obrázky. Stačí přidat knihovnu Font Awesome a použít jejich ikony.

2.3.2025 47x CSS styly - tipy a rady

Celkem 2 články z rubriky: CSS styly - tipy a rady

předchozí článek

Na první článek

1. Nastavení odkazu na css

přidat do index.php a mobil/index.php

<link rel="stylesheet" ref="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

2. Vložení kódu

odkazy na telefon a na whatsapp

<a href="tel:+420733663090">
    <i class="fa-solid fa-phone"></i> Zavolejte mi
</a>

<a href="https://wa.me/420733663090" target="_blank">
    <i class="fa-brands fa-whatsapp"></i> Napište na WhatsApp
</a>

3. Úprava css

home.css nebo mobil/styly.css

a {
    display: inline-block;
    font-size: 18px;
    text-decoration: none;
    margin: 10px;
    color: #333;
}
i {
    margin-right: 5px;
    font-size: 24px;
}
.fa-whatsapp {
    color: #25D366; /* WhatsApp zelená */
}
.fa-phone {
    color: #007BFF; /* Modrá jako telefonní odkaz */
}

Akce s článkem

Doporučit známému
Vytisknou článek

Podobné články

Google fonts s českou diakritikou

Návody (7)CSS styly - tipy a rady (2)PHP manuál (1)Administrativa CRnet (1)