Adobe designer Wenting Zhang created an interesting web app for generating pure CSS icons. It’s simply named “CSS Icon” and it may be one of the coolest icon generators for frontend developers.
This project is completely free and open-sourced on GitHub so you’re free to download and mess with any of the codes.
40 Excellent Mini Icon Sets
When you go on a quest of finding icons for your designs you may end up with different... Read more
These icons don’t have any CSS dependencies or need any special browser features. At first glance, it may seem like the icons are built on SVGs but they’re actually just divs.
Through the magic of CSS, you can build custom line icons for common interface elements such as the hamburger menu, the three-dot icon or the print icon (among many others).
You can choose between thin line icons or dark filled icons. They both utilize similar CSS properties and you can even see what they are by clicking any icon in the list. You’ll see a sliding sidebar with the HTML and CSS code along with the icon enlarged.
If you look towards the top-right corner of the code fields you’ll see a little copy icon. Click that to automatically copy the code to your clipboard. Oh, and that copy icon? Also built with Wenting’s pure CSS code.
To change the color of any icon, just find the color property in the main icon class. Updating that one color property will change everything else, too.
Create Your Own Font Icon Set Easily With Fontello
We can see that Font Icons are widely used across websites, and for good reason. The Font Icon... Read more
Since these icons are pretty simple, they probably won’t work for every website. But this is a cool alternative to images or icon fonts and it’s completely free.
Check out the CSS Icon home page to see more examples and to copy/edit the source. You can also test each icon separately in CodePen if you wanna toy around with the source in your browser.
The post This Gallery of Pure CSS Icons is What All Frontend Developers Want appeared first on Hongkiat.
https://goo.gl/hYDEHJ
No comments:
Post a Comment