In the modern web, everybody wants their site should response quick and fast. This blog is not related to any web performances, but it will talk one key factor of web performance which is using CSS icon fonts instead of images.<\/p>\n
Nowadays using icon fonts is very popular and useful. The purpose of creating a custom icon fonts library is to make better performance of web and some more which are listed below:-<\/p>\n
\u2022 Icons looks more crisp and sharp
\n\u2022 All of the icons are loaded in single file which reduces number of server request
\n\u2022 Easy to customize in different resolutions
\n\u2022 Its much smaller and lighter in weight
\n\u2022 Completely portable and self-contained
\n\u2022 No images for icons<\/p>\n
You can find lots of options available on the web to create your custom icon fonts library but I found it\u2019s so easy to do this with Icomoon.<\/p>\n
Now its time to create our custom icon fonts with Icomoon app.<\/p>\n
Go to Icomoon application and you will see a hamburger menu on top left corner of your screen. Click on Manage project > New project (enter your project name) > load<\/p>\n
After clicking on load button, you will see few font icons which Icomoon provides us by default. You can also use those existing font icons in your project.<\/p>\n
To create your custom library, you need to click on “Import Icons” button (which is placed in the top bar) and choose your custom icons files which should be in “svg” format.
\nYou\u2019ll able to see your selected font icons in the screen. Now, you need to select all the icon fonts, then click on generate fonts (which is placed in the bottom section of the window).<\/p>\n
Now, you\u2019ll see your icon fonts with their classes name and CSS content code. You can rearrange them and also, change the name as per your desire. Click on download button (bottom of page) to create your library. You will an archive file, inside which is folder containing you font in WOFF, TTF, EOT and SVG formats. To use it in your project, you need to add these to your document using Hope this helps!<\/p>\n","protected":false},"excerpt":{"rendered":" In the modern web, everybody wants their site should response quick and fast. This blog is not related to any web performances, but it will talk one key factor of web performance which is using CSS icon fonts instead of images. Nowadays using icon fonts is very popular and useful. The purpose of creating a […]<\/p>\n","protected":false},"author":51,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":19,"footnotes":""},"categories":[1],"tags":[2693,2694,2688,2690,2692,2691,2689],"class_list":["post-29355","post","type-post","status-publish","format-standard","hentry","category-technology","tag-css-fonts","tag-css-icons","tag-custom-icon","tag-font-icon","tag-generate-icon","tag-icomoon","tag-icon-fonts"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t@font-face<\/code>.<\/p>\n