Obrázky a ikonky

Vícebarevné ikonky v křivkách do složky /www/img (logo, přepínač jazyků, výhody)
Uživatelsky editovatelné obrázky, které nebudou zatím nijak napojené do složky /userfiles/images (defaultní kontakt), pokud jde tak obrázek uložit v jpg (png jen v případě nutnosti průhlednosti)

Adobe XD - export ikonek

Jednobarevné ikonky si vedle sebe seřadíme nejlépe v Adobe XD.

  1. Označíme všechny části ikonky a hodíme do groupy pomocí CTRL + G
  2. V levém sloupci vybereme vrstvy a klikneme na danou ikonku
  3. Změníme pojmenování ikonky
  4. Označíme všechny ikonky a vlevo nahoře přes File -> Export -> Export selected si hromadně uložíme do nějaké složky.
  5. Nahrajeme na icomoon.io a přes pravou nabídku u všech ikon odebereme barvu (properties -> remove all colors)
  6. Ve spodní nabídce dáme generate font a poté nahoře nastavíme preference tímto způsobem

     
  7. Stáhne se složka - soubor selection.json vložíme do projektu /resources/iconfonts - tento soubor obsahuje informace o všech ikonkách a je důležitý pro budoucí editaci ikonek (přetáhnutím do icomoon se načtou všechny ikonky které jsme dříve nahráli)
    style.css - vykopírujeme všechny třídy s ikonami a vložíme do icon.scss
    všechny fonty ze složky fonts vezmeme a vložíme do složky /www/font - například podle webu polak, karieradrevojas,...
  8. v souboru font.scss musí být nadefinována cesta k iconfontu.

Nevíte si rady?
Neváhejte se zeptat

Nevíte si rady nebo potřebujete něco konzultovat? Nápovědu stále zdokonalujeme na základě vašich požadavků a postřehů. Uvádíme co nejvíce možných variant, které používáme na řešení jednotlivých částí webu, mějte ale na paměti, že projekty řešíme individuálně na základě konkrétních potřeb.

Nádražní 876
560 02 Česká Třebová

honza.cech@czechgroup.cz

+420 774 201 483

*
*