{"id":314,"date":"2017-11-17T16:41:00","date_gmt":"2017-11-17T16:41:00","guid":{"rendered":"http:\/\/www.infotheme.in\/blog\/?p=314"},"modified":"2022-08-10T11:44:17","modified_gmt":"2022-08-10T11:44:17","slug":"add-css-icons-into-your-website-without-ttf-woff-fonts","status":"publish","type":"post","link":"https:\/\/infotheme.net\/blog\/add-css-icons-into-your-website-without-ttf-woff-fonts\/","title":{"rendered":"How to Add CSS Icons into your Website without TTF, Woff Fonts, FontAwesome &#038; GlyphIcons"},"content":{"rendered":"<p>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 <strong>CSS Icons<\/strong>, means now we have a library which will easily load icons without partially loading issue. I want to say Here a Happy Good Bye! \ud83d\ude42 to last generation&#8217;s icons and there fonts like <strong>Font Awesome and FlatIcons<\/strong>.<\/p>\n<figure id=\"attachment_315\" aria-describedby=\"caption-attachment-315\" style=\"width: 650px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" class=\"size-full wp-image-315\" src=\"http:\/\/www.infotheme.in\/blog\/wp-content\/uploads\/2016\/11\/How-to-Use-CSS-Icons-into-your-website.png\" alt=\"how to use css icons into your website\" width=\"650\" height=\"350\"><figcaption id=\"caption-attachment-315\" class=\"wp-caption-text\">how to use css icons into your website<\/figcaption><\/figure>\n<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Contents<\/p><ul class=\"toc_list\"><li><a href=\"#How_to_use_Css_Icons_in_website_without_FontAwesome_and_Glyphicons_or_Icon_Fonts\"><span class=\"toc_number toc_depth_1\">1<\/span> How to use Css Icons in website without FontAwesome and Glyphicons or Icon Fonts<\/a><ul><li><a href=\"#How_to_Animate_Icons_of_your_Website\"><span class=\"toc_number toc_depth_2\">1.1<\/span> How to Animate Icons of your Website<\/a><\/li><\/ul><\/li><li><a href=\"#Conclusion_8211_How_to_Use_CSS_Icons\"><span class=\"toc_number toc_depth_1\">2<\/span> Conclusion &#8211; How to Use CSS Icons:<\/a><\/li><\/ul><\/div>\n<h2 style=\"text-align: center;\"><span id=\"How_to_use_Css_Icons_in_website_without_FontAwesome_and_Glyphicons_or_Icon_Fonts\">How to use Css Icons in website without FontAwesome and Glyphicons or Icon Fonts<\/span><\/h2>\n<p>So Guys you need to follow below given options to use <strong>CSSIcons<\/strong>, and download it from live cdn to your own server.<\/p>\n<p><strong>Step 1: &nbsp;<\/strong>Go to CSS Icons GitHub Repository <a href=\"https:\/\/github.com\/wentin\/cssicon\/blob\/master\/css\/icons.css\" target=\"_blank\" rel=\"nofollow noopener\"><strong>Click Here<\/strong><\/a><\/p>\n<p><strong>Step 2:<\/strong> Copy Code, Create new File with name &#8220;css-icons.css&#8221; or &#8220;icons.css&#8221;.<\/p>\n<p><strong>Step 3:<\/strong> Paste css code there &amp; save it to your assets directory of project.<\/p>\n<p><strong>Step 4:<\/strong> After doing this link it to your web project with &lt;link rel&gt; tag.<\/p>\n<p><strong>Step 5:<\/strong> Once you will follow this you have to create an element where you will show your icon.<\/p>\n<p>According to step 4 you have to write a code similar to this:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">&amp;lt;link rel=&quot;http:\/\/example.com\/assets\/css\/icons.css&quot; type=&quot;text\/css&quot; media=&quot;all&quot;&amp;gt; <\/pre>\n<p>According to step 5 you have to create an element with following code, (code to show heart&#8217;s icon):<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n\n&amp;lt;div class=&quot;icon heart&quot;&amp;gt;&amp;lt;\/div&amp;gt;\n\n<\/pre>\n<p>For other icons you can follow <strong><a href=\"http:\/\/cssicon.space\/\" target=\"_blank\" rel=\"nofollow noopener\">CSS Icon&#8217;s Official Website<\/a>&nbsp;<\/strong>, you can search there desired icons for your website and web project.<\/p>\n<h3><span id=\"How_to_Animate_Icons_of_your_Website\">How to Animate Icons of your Website<\/span><\/h3>\n<p>So guys with this css library you can also animate desired icons, follow below steps to animate your website&#8217;s icons, menu icons or other icons.<\/p>\n<p><strong>Step 1:&nbsp;<\/strong>Go to this official website of CSSIcons <strong><a href=\"http:\/\/cssicon.space\/#\/animate\" target=\"_blank\" rel=\"nofollow noopener\">Click Here<\/a><\/strong><\/p>\n<p><strong>Step 2:<\/strong> Select two icons (Icon A &amp; Icon B)<\/p>\n<p><strong>Step 3:<\/strong> Play Css Icon&#8217;s Animation, Test your self<\/p>\n<p><strong>Step 4:<\/strong> Copy the whole code as follows html code in your project&#8217;s html web page and js in your website&#8217;s main js file or any other js file, you can create your own js file with name <strong>Animate-Icons.js<\/strong>.<\/p>\n<h2><span id=\"Conclusion_8211_How_to_Use_CSS_Icons\">Conclusion &#8211; How to Use CSS Icons:<\/span><\/h2>\n<p>I hope you guys are ready to use this awesome library for your next web project, or existing website. It&#8217;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&#8217;s of data plans due to heavy resources on websites. I also recommend you for <a href=\"http:\/\/www.infotheme.in\/blog\/web-development\" rel=\"nofollow noopener\" target=\"_blank\"><strong>website development<\/strong><\/a> 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).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hey, Guys! How r u ? Hope you are doing well. So today i am ready with another research of the last few days. I [&hellip;] <span class=\"read-more-link\"><a class=\"read-more\" href=\"https:\/\/infotheme.net\/blog\/add-css-icons-into-your-website-without-ttf-woff-fonts\/\">Read More<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":315,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[135,138],"tags":[153,154,155,156],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/posts\/314"}],"collection":[{"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/comments?post=314"}],"version-history":[{"count":2,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/posts\/314\/revisions"}],"predecessor-version":[{"id":1477,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/posts\/314\/revisions\/1477"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/media?parent=314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/categories?post=314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/tags?post=314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}