CSS Ikonky

Ikonky Font Awesome

UPDATE: Od verze 2.31 je knihovna Font Awesome označena jako zastaralá a nepoužívá se. Je možné ji volitelně zapnout na projektu přes přepínač @use-font-awesome: true

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";
}