Tato galerie Pure CSS ikon je to, co všichni přední vývojáři chtějí

Návrhář Adobe Wenting Zhang vytvořil zajímavá webová aplikace pro generování čistých CSS ikon. Je to prostě pojmenované “Ikona CSS” a může to být jeden z nejlepších generátory ikon pro vývojáře frontendu.

Tento projekt je zcela zdarma a na GitHubu takže si můžete stáhnout a zmazat některý z kódů.

Tyto ikony nemají žádné závislosti na CSS nebo potřebujete speciální funkce prohlížeče. Na první pohled se může zdát, že ikony jsou postaveny na SVG oni jsou vlastně jen divs.

Prostřednictvím magie CSS můžete stavět vlastní řádek ikon pro společné prvky rozhraní například menu hamburger, ikona tří teček nebo ikona tisku (mezi mnoha dalšími).

Můžete si vybrat mezi ikony tenká čára nebo tmavé naplněné ikony. Oba využívají podobné vlastnosti CSS a můžete dokonce vidět, co to je, kliknutím na ikonu v seznamu. Uvidíte posuvný postranní panel s kódem HTML a CSS spolu se zvětšenou ikonou.

Pokud se podíváte do pravého horního rohu kódových polí, uvidíte a malá ikona kopírování. Klikněte na to automaticky zkopírujte kód do vaší schránky. A ta ikona kopírování? Je také postaven s čistým CSS kódem společnosti Wenting.

Na změnit barvu jakékoli ikony, jen najít barva vlastnictví v hlavní třídě ikon. Aktualizace této barva vlastnictví změní i všechno ostatní.

Protože tyto ikony jsou docela jednoduché, pravděpodobně nebudou fungovat pro všechny webové stránky. Ale tohle je cool alternativa k obrázkům nebo ikonám fontů a jeho zcela zdarma.

Podívejte se na Domovská stránka CSS Icon na viz další příklady a kopírovat / upravovat zdroj. Můžete také otestujte každou ikonu zvlášť v CodePen, pokud chcete hračka se zdrojem ve vašem prohlížeči.