BOSTRAP ikony
Bootstrap ikony jsou sada vektorových ikon, které lze snadno přizpůsobit pomocí CSS.
Jsou navrženy tak, aby byly použitelné v různých velikostech a barvách, což je činí ideálními pro použití v moderních webových aplikacích.
Bootstrap ikony jsou dostupné jako SVG soubory, což znamená, že jsou škálovatelné a neztrácejí kvalitu při zvětšování nebo zmenšování.
To je výhodné pro responzivní design, kde se velikost ikon může měnit v závislosti na velikosti obrazovky.
Pro použití Bootstrap ikon je třeba nejprve zahrnout jejich CSS soubor do vašeho projektu.
Poté můžete ikony přidat do svého HTML kódu pomocí příslušných tříd.
Například, pro přidání ikony "alarm" byste použili následující kód:
<i class="bi bi-alarm"></i>Bootstrap ikony také podporují různé velikosti a barvy, které lze snadno upravit pomocí CSS tříd. Například, pro změnu velikosti ikony na 2x, můžete použít třídu "bi-2x":
<i class="bi bi-alarm bi-2x"></i>Celkově jsou Bootstrap ikony skvělým nástrojem pro vývojáře, kteří chtějí rychle a snadno přidat vizuální prvky do svých webových aplikací.
Více informací a kompletní seznam ikon najdete na oficiálních stránkách Bootstrap ikon: https://icons.getbootstrap.com/
Icona jako SVG obrázek
Ikonu si stáhnu do svého adresáře jako SVG.
Poté ji mohu vložit do HTML kódu pomocí značky <img> jako obrázek SVG
Pokud ji vložím jako obrázek, použiji následující kód:
<img src="./images/ikony/JmenoIkony.svg" alt="Popis ikony">
Jedná s o obyčejný obrázek, kerý mohu upravovat například pomocí 'Inskape'
Při tvorbě vlastní knihovny ikon doporučuji použivat oficiální název případně doplněný o info o barvě atd.
Například: clock-fill.svg (poznámka: originál icona je velikosti 16x16 px, nastylovaná je na rozměr 50x50px)
Například tedy: clock-fill-red.svg (rozměr jsem neměnil, takže opět nastylováno 50x50px přímo v kódu)
Ikony jsou v rozměru 16x16px. Pro použití je vhodné použít vlastní třídu a tu nastylovat v CSS
.img_icon_01 {
width: 50px;
height: 50px;
} V HTML pak použiji:
<img src="./images/ikony/clock-fill.svg" alt="clock-fill" class="img_icon_1">Výsledek:
