Ikony
Sada je složena z minimalistických, expresivních, dobře čitelných ikon, které jsou příjemné na pohled.
Galerie
K dispozici je zhruba 900 ikon ve dvou základních velikostech, rozdělených do 19 kategorií.
V případě potřeby dokreslení ikony kontaktuje oddělení UX.
User Interface
Document
Settings
Editorial
Communication
User
Time
Location
Web
Shopping
Music
Tool
Environment
Building
Transport
Sport
Weather
Food
Animal
Miscellaneous
Logo
Použití
Ikony jsou řešeny webovým fontem. Každá ikona je tedy jedním znakem daného fontu, který je umisťován do pseudoelementu. MultiWeb nabízí dva způsoby, jakými tohoto dosáhnout.
HTML
<div class="icon ui-home-a"></div>Doporučeno Přidání ikony pouze za pomocí tříd je nejpohodlnější. Zároveň šetří počet řádků CSS, jelikož třídy a k nim přiřazené znaky jsou již součástí stylů.
HTML + Less
<div class="icon foo"></div>.foo {
--icon: @ui-home-a;
}Velikosti
Ve skutečnosti jsou ikony řešeny dvěma fonty pro malou a velkou variantů znaků. Aby ikony nebyly rozmazané, je potřeba držet se násobků definovaných velikostí
Základní
<!-- small (default) -->
<span class="icon location-pin-b"></span>
<!-- large -->
<span class="icon location-pin-b icon-large"></span>Násobky
<span class="icon location-pin-b"></span>
<span class="icon location-pin-b icon-large "></span>
<span class="icon location-pin-b icon-2x"></span>
<span class="icon location-pin-b icon-2x icon-large"></span>.icon-2x {
&::before {
font-size: calc(2 * var(--icon-small-font-size));
}
&.icon-large {
&::before {
font-size: calc(2 * var(--icon-large-font-size));
}
}
}Ne Nedefinujte ikonám vlastní velikosti, zapříčinilo by to jejich rozmazání a nečitelnost.
Užitečné
var(--icon-small-font-size)
var(--icon-large-font-size)