Hey, Guys! How r u ? Hope you are doing well. So today i am ready with another research of the last few days. I have found an Icons set (resource) which is really cool and having less size. So it will make your website Icon Ready without fonts. I was really irritated with partially loaded fonts over my website. Now here i can say you, we have 500 icons which are best for any web project. We call it CSS Icons, means now we have a library which will easily load icons without partially loading issue. I want to say Here a Happy Good Bye! 🙂 to last generation’s icons and there fonts like Font Awesome and FlatIcons.
Contents
How to use Css Icons in website without FontAwesome and Glyphicons or Icon Fonts
So Guys you need to follow below given options to use CSSIcons, and download it from live cdn to your own server.
Step 1: Go to CSS Icons GitHub Repository Click Here
Step 2: Copy Code, Create new File with name “css-icons.css” or “icons.css”.
Step 3: Paste css code there & save it to your assets directory of project.
Step 4: After doing this link it to your web project with <link rel> tag.
Step 5: Once you will follow this you have to create an element where you will show your icon.
According to step 4 you have to write a code similar to this:
<link rel="http://example.com/assets/css/icons.css" type="text/css" media="all">
According to step 5 you have to create an element with following code, (code to show heart’s icon):
<div class="icon heart"></div>
For other icons you can follow CSS Icon’s Official Website , you can search there desired icons for your website and web project.
How to Animate Icons of your Website
So guys with this css library you can also animate desired icons, follow below steps to animate your website’s icons, menu icons or other icons.
Step 1: Go to this official website of CSSIcons Click Here
Step 2: Select two icons (Icon A & Icon B)
Step 3: Play Css Icon’s Animation, Test your self
Step 4: Copy the whole code as follows html code in your project’s html web page and js in your website’s main js file or any other js file, you can create your own js file with name Animate-Icons.js.
Conclusion – How to Use CSS Icons:
I hope you guys are ready to use this awesome library for your next web project, or existing website. It’s really helpful for you guys and you can make a font free icons in your website, Now i am waiting for font free websites, means no ttf, otf, eot and woff more. Just css fonts, for web and those who are using websites in their daily life. Because people loss lot’s of data plans due to heavy resources on websites. I also recommend you for website development and developers to make your clients website speed optimized by using these type less size libraries. I will be Back soon with new stuff, keep doing well (y).