Ta galeria czystych ikon CSS jest tym, czego wszyscy programiści chcą

Projektant Adobe Wenting Zhang stworzył ciekawa aplikacja internetowa dla generowanie czystych ikon CSS. To po prostu nazwa “Ikona CSS” i może być jednym z najfajniejszych generatory ikon dla programistów frontendowych.

Ten projekt jest całkowicie za darmo i open-sourced na GitHub więc możesz pobrać i zepsuć dowolny z kodów.

Te ikony nie ma żadnych zależności CSS lub potrzebujesz specjalnych funkcji przeglądarki. Na pierwszy rzut oka może się wydawać, że ikony są zbudowane na SVG, ale są po prostu divami.

Dzięki magii CSS możesz budować niestandardowe ikony linii dla wspólne elementy interfejsu takie jak menu hamburgera, ikona z trzema kropkami lub ikona drukowania (wśród wielu innych).

Możesz wybrać pomiędzy ikony cienkiej linii lub ciemne wypełnione ikony. Oboje wykorzystują podobne właściwości CSS możesz nawet zobaczyć, co to jest, klikając dowolną ikonę na liście. Zobaczysz przesuwany pasek boczny z kodem HTML i CSS wraz z powiększoną ikoną.

Jeśli spojrzysz w prawy górny róg pól kodu, zobaczysz mała ikona kopii. Kliknij to na automatycznie skopiuj kod do twojego schowka. Aha, i ta ikona kopii? Zbudowany również z czystym kodem CSS Wentinga.

Do zmień kolor jakiejkolwiek ikony, tylko znaleźć kolor własność w głównej klasie ikon. Aktualizacja tego kolor własność zmieni wszystko inne.

Ponieważ te ikony są dość proste, prawdopodobnie nie będą działać na każdej stronie. Ale to jest fajna alternatywa dla obrazów lub czcionek ikon i jego całkowicie za darmo.

Sprawdź Strona główna ikony CSS do zobacz więcej przykładów i do skopiuj / edytuj źródło. Możesz również przetestuj każdą ikonę osobno w CodePen, jeśli chcesz zabawić się ze źródłem w przeglądarce.