Ikonky
CSS Ikonky
Obrázek: Ikonka
Blok Obrázek umožňuje přidat do obsahu vlastní ikonky s různými velikostmi. Ikonka je však vložená jako běžný obrázek
Blok: Tlačítko
Tlačítko umožňuje vložit ikonky z iconsetu Material Design Icons, Phosphor icons nebo emoji
Legacy
Ikonky Font Awesome
Využíváme vlastní build knihovny Font Awesome, ve kterém je možné nastavit, co konkrétně chceme z knihovny používat. Neimportujeme tedy celou knihovnu, čímž uspoříme desítky kilobajtů.
Facebook
Google Plus
Youtube
Twitter
Používání ikonek
Před použitím je styl pro ikonky nejprve potřeba vygenerovat. V site.less stačí definovat seznam ikonek @icons-list, které se na webu používají. Tento seznam může obsahovat 1 - n položek. Proměnná se pak předá do mixinu .use-fa-icon(), který styly vygeneruje. Názvy dostupných ikonek jsou v dokumentaci Font Awesome.
Ukázka kódu v site.less:
@icons-list: "camera", "calendar";
Přidáním názvu do seznamu použitých ikonek se automaticky vygeneruje následující kód:
.icon-camera:before {
content: "\f02d";
}
.icon-calendar:before {
content: "\f12d";
}