Ikony

Ikony

Sada je složena z minimalistických, expresivních, dobře čitelných ikon, které jsou příjemné na pohled.

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)