{"id":15616,"date":"2024-02-05T15:00:03","date_gmt":"2024-02-05T07:00:03","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15616"},"modified":"2024-02-05T16:12:04","modified_gmt":"2024-02-05T08:12:04","slug":"webfont-icons","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/webfont-icons\/","title":{"rendered":"A Guide to Better and Sharper UI Icons with Web Fonts"},"content":{"rendered":"<p>Are you using bitmap images like PNGs and GIFs for icons on your website? If so, you might have noticed they can be quite hefty in size, especially if they\u2019re detailed or numerous. This not only increases the file size but can also slow down your website, as it requires multiple HTTP requests for each icon.<\/p>\n<p>While CSS sprites offer a workaround, they don\u2019t completely solve the issue of large file sizes. Another downside of bitmap icons is their lack of flexibility and scalability. Enlarging these icons or viewing them on high-resolution screens, like Apple\u2019s retina display, often results in a blurry appearance.<\/p>\n<p>If these issues sound familiar, it\u2019s time to consider switching to icon fonts for a more efficient and scalable solution.<\/p>\n<h2>Exploring the Advantages of Icon Fonts<\/h2>\n<p>An <strong>icon font<\/strong> is essentially a collection of icons packaged into a web font, which can be easily incorporated into a website using the <code>@font-face<\/code> rule. As highlighted by Chris at CSS-Tricks, icon fonts bring several key advantages over traditional image icons:<\/p>\n<ul>\n<li>Being vector-based, icon fonts are resolution-independent, ensuring sharp and clear display on various screen resolutions, including high-resolution screens like retina displays.<\/li>\n<li>Icon fonts are scalable, allowing for size adjustments without any loss in quality or clarity.<\/li>\n<li><strong>As they are fonts<\/strong>, you can easily modify their color, transparency, text-shadow, and size using CSS.<\/li>\n<li>They can be animated with CSS3, adding a dynamic element to your website.<\/li>\n<li>The use of <code>@font-face<\/code> for icon fonts is widely supported, even in older browsers like Internet Explorer 4 (with .eot).<\/li>\n<li>Using icon fonts results in fewer HTTP requests and a smaller overall file size.<\/li>\n<\/ul>\n<p>Here\u2019s a list of some top free icon fonts available:<\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/fontawesome.com\/\">Font Awesome<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/keyamoon.com\/icomoon\/\">IcoMoon<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.fontfabric.com\/fonts\/social-media-icons-pack\/\">Social Media Icons<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/zurb.com\/playground\/foundation-icons\">Zurb Foundation Icons<\/a><\/li>\n<\/ul>\n<p>Always ensure to review and adhere to the licensing terms before embedding any icon font in your website, as a sign of respect for the creator\u2019s effort and work.<\/p>\n<h2>Implementing the @font-face Rule<\/h2>\n<p>As mentioned earlier, icon fonts are embedded in web pages using the <code>@font-face<\/code> rule within CSS. This rule allows us to define a new <code>font-family<\/code>. Let\u2019s take the \u2018Web Symbols\u2019 font as an example:<\/p>\n<pre>\r\n @font-face{ \r\n font-family: 'WebSymbolsRegular';\r\n src: url('fonts\/websymbols-regular-webfont.eot');\r\n src: url('fonts\/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),\r\n url('fonts\/websymbols-regular-webfont.woff') format('woff'),\r\n url('fonts\/websymbols-regular-webfont.ttf') format('truetype'),\r\n url('fonts\/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');\r\n }\r\n<\/pre>\n<p>In the HTML document, to display the icons, we simply use characters that correspond to each icon. Rather than applying the <code>font-family<\/code> globally, we can target specific elements by adding a unique class, like this:<\/p>\n<pre>\r\n &lt;ul class=\"icon-font\"&gt;\r\n\t &lt;li&gt;h&lt;\/li&gt;\r\n\t &lt;li&gt;i&lt;\/li&gt;\r\n\t &lt;li&gt;j&lt;\/li&gt;\r\n\t &lt;li&gt;A&lt;\/li&gt;\r\n\t &lt;li&gt;I&lt;\/li&gt;\r\n &lt;\/ul&gt;\r\n<\/pre>\n<p>Then, back in the CSS, we define this new <code>font-family<\/code> for the class we added:<\/p>\n<pre>\r\n.icon-font {\r\n    font-family: WebSymbolsRegular;\r\n    font-size: 12pt;\r\n}\r\n<\/pre>\n<p><a href=\"https:\/\/hongkiat.github.io\/webfont-icons\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  Demo @font-face <\/span><\/a><\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/typography-for-modern-websites\/\">Mastering Modern Web Typography: Essential Tips for Designers<\/a>\n\t\t\t\t<\/p>\n<h2>Integrating Icons with Pseudo-elements<\/h2>\n<p>Pseudo-elements offer another creative way to incorporate icons. Consider the following HTML markup as our starting point:<\/p>\n<pre>\r\n\t &lt;ul class=\"icon-font pseudo\"&gt;\r\n\t &lt;li&gt;Reply&lt;\/li&gt;\r\n\t &lt;li&gt;Reply All&lt;\/li&gt;\r\n\t &lt;li&gt;Forward&lt;\/li&gt;\r\n\t &lt;li&gt;Attachment&lt;\/li&gt;\r\n\t &lt;li&gt;Image&lt;\/li&gt;\r\n &lt;\/ul&gt;\r\n<\/pre>\n<p>In the CSS, we can enhance this list by using pseudo-elements to display icons before each item:<\/p>\n<pre>\r\nul.icon-font.pseudo li:before {\r\n    font-family: WebSymbolsRegular;\r\n    margin-right: 5px;\r\n}\r\n\r\nul.icon-font.pseudo li:nth-child(1):before {\r\n    content: \"h\";\r\n}\r\n\r\nul.icon-font.pseudo li:nth-child(2):before {\r\n    content: \"i\";\r\n}\r\n\r\nul.icon-font.pseudo li:nth-child(3):before {\r\n    content: \"j\";\r\n}\r\n\r\nul.icon-font.pseudo li:nth-child(4):before {\r\n    content: \"A\";\r\n}\r\n\r\nul.icon-font.pseudo li:nth-child(5):before {\r\n    content: \"I\";\r\n}\r\n<\/pre>\n<p><a href=\"https:\/\/hongkiat.github.io\/webfont-icons\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  Demo Pseudo-element <\/span><\/a><\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/\">Understanding Pseudo-Element :before and :after<\/a>\n\t\t\t\t<\/p>\n<h2>Private Use Unicode<\/h2>\n<p>There\u2019s a scenario where instead of embedding icons into standard characters (A, B, C, D, etc.), they\u2019re embedded in <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Private_Use_(Unicode)\">Unicode Private Use Areas<\/a> to avoid any clashing among characters. This method is used by tools like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/fontawesome.com\/\">FontAwesome<\/a>, where the character codes are included in the stylesheet like so:<\/p>\n<pre>\r\n.icon-glass:before {\r\n    content: \"\\f0c6\";\r\n}\r\n <\/pre>\n<p>To directly insert the icon into HTML, the code <code>\\f0c6<\/code> won\u2019t render as it\u2019s not a valid HTML-encoded character.<\/p>\n<p><strong>HTML requires a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Numeric_character_reference\">numerical reference markup<\/a><\/strong> to render special characters. It requires prefixing the hexadecimal number (representing the character) with an ampersand (<code>&<\/code>), a hash (<code>#<\/code>), and an <code>x<\/code>. For instance, <code>f0c6<\/code> becomes <code>&#xf0c6;<\/code> in HTML. In FontAwesome, this code displays a <strong>paper clip icon<\/strong>, like this:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webfont-icons\/paper-clip.jpg\" alt=\"paper clip\" width=\"500\" height=\"200\"><\/figure>\n<p><a href=\"\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  Demo Unicode <\/span><\/a><\/p>\n<p class=\"note\"><strong>Further Reading:<\/strong> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Character_encodings_in_HTML\">Characters Encoding in HTML<\/a><\/p>\n<h2>Font Subsetting<\/h2>\n<p>When your icon collection includes unused characters, you can eliminate them by subsetting the font, which also <strong>reduces the font file size<\/strong>. A convenient tool for this is FontSquirrel\u2019s <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.fontsquirrel.com\/\/fontface\/generator\/\">@font-face generator<\/a>.<\/p>\n<p>Visit the generator, add your font, and select <strong>Expert<\/strong>. Then choose <strong>Custom Subsetting<\/strong> for more options.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webfont-icons\/font-subset-option.jpg\" alt=\"font subset\" width=\"500\" height=\"499\"><\/figure>\n<p>For example, using the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.fontfabric.com\/fonts\/social-media-icons-pack\/\">Sociolico<\/a> font for social media icons on our website, we only need the icons for Dribble, Facebook, and Twitter, represented by <strong>d, f<\/strong>, and <strong>t<\/strong>. These characters are entered in the Single Characters field as shown:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/webfont-icons\/font-subset-single.jpg\" alt=\"font subset\" width=\"500\" height=\"231\"><\/figure>\n<p>Now, you can download the font, which in this case, has been reduced to a mere 3Kb to 5Kb in size. Note that only the characters <strong>d, f,<\/strong>, and <strong>t<\/strong> will render as icons; any other characters will appear as regular letters.<\/p>\n<p class=\"note\"><strong>Further Reading:<\/strong> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/creatiface.com\/tips\/optimize-web-fonts\">How to Optimize Web Fonts for Saving Bandwidth<\/a><\/p>\n<h2>Final Thought<\/h2>\n<p>While this practice excludes the possibility of adding highly detailed effects <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dribbble.com\/shots\/190361-Postale-Icon-App\">like this<\/a>, it offers a flexible, scalable, retina-ready solution with minimal file size. If your design can bear the absence of high detail, this icon-serving method is highly beneficial.<\/p>\n<p>For those eager to explore further, below are some helpful references, along with our demo and source code available for download.<\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.webdesignerdepot.com\/2012\/01\/how-to-make-your-own-icon-webfont\/\">How to Make Your Own Icon Webfont<\/a> \u2013 WebDesignerDepot.com<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/24ways.org\/2011\/displaying-icons-with-fonts-and-data-attributes\">Displaying Fonts and Data Attributes<\/a> \u2013 24Ways<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Private_Use_(Unicode)\">Private Use Unicode<\/a> \u2013 Wikipedia<\/li>\n<\/ul>\n<p><a href=\"https:\/\/hongkiat.github.io\/webfont-icons\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  See demo <\/span><\/a>\n<a href=\"https:\/\/github.com\/hongkiat\/webfont-icons\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  Download source codes <\/span><\/a><\/p>\n<p><strong>Note:<\/strong> This post was first published on the 5th of Dec, 2012.<\/p>","protected":false},"excerpt":{"rendered":"<p>Are you using bitmap images like PNGs and GIFs for icons on your website? If so, you might have noticed they can be quite hefty in size, especially if they\u2019re detailed or numerous. This not only increases the file size but can also slow down your website, as it requires multiple HTTP requests for each&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3395],"tags":[894,2233],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Better and Sharper UI Icons with Web Fonts<\/title>\n<meta name=\"description\" content=\"Are you using bitmap images like PNGs and GIFs for icons on your website? If so, you might have noticed they can be quite hefty in size, especially if\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/webfont-icons\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Guide to Better and Sharper UI Icons with Web Fonts\" \/>\n<meta property=\"og:description\" content=\"Are you using bitmap images like PNGs and GIFs for icons on your website? If so, you might have noticed they can be quite hefty in size, especially if\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/webfont-icons\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-05T07:00:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-05T08:12:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/webfont-icons\/paper-clip.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webfont-icons\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webfont-icons\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"A Guide to Better and Sharper UI Icons with Web Fonts\",\"datePublished\":\"2024-02-05T07:00:03+00:00\",\"dateModified\":\"2024-02-05T08:12:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webfont-icons\\\/\"},\"wordCount\":955,\"commentCount\":27,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webfont-icons\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/webfont-icons\\\/paper-clip.jpg\",\"keywords\":[\"Fonts\",\"Icon Font\"],\"articleSection\":[\"UI\\\/UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webfont-icons\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webfont-icons\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webfont-icons\\\/\",\"name\":\"Better and Sharper UI Icons with Web Fonts\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webfont-icons\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webfont-icons\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/webfont-icons\\\/paper-clip.jpg\",\"datePublished\":\"2024-02-05T07:00:03+00:00\",\"dateModified\":\"2024-02-05T08:12:04+00:00\",\"description\":\"Are you using bitmap images like PNGs and GIFs for icons on your website? If so, you might have noticed they can be quite hefty in size, especially if\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webfont-icons\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webfont-icons\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webfont-icons\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/webfont-icons\\\/paper-clip.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/webfont-icons\\\/paper-clip.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/webfont-icons\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Guide to Better and Sharper UI Icons with Web Fonts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Better and Sharper UI Icons with Web Fonts","description":"Are you using bitmap images like PNGs and GIFs for icons on your website? If so, you might have noticed they can be quite hefty in size, especially if","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/webfont-icons\/","og_locale":"en_US","og_type":"article","og_title":"A Guide to Better and Sharper UI Icons with Web Fonts","og_description":"Are you using bitmap images like PNGs and GIFs for icons on your website? If so, you might have noticed they can be quite hefty in size, especially if","og_url":"https:\/\/www.hongkiat.com\/blog\/webfont-icons\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2024-02-05T07:00:03+00:00","article_modified_time":"2024-02-05T08:12:04+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/webfont-icons\/paper-clip.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/webfont-icons\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/webfont-icons\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"A Guide to Better and Sharper UI Icons with Web Fonts","datePublished":"2024-02-05T07:00:03+00:00","dateModified":"2024-02-05T08:12:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/webfont-icons\/"},"wordCount":955,"commentCount":27,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/webfont-icons\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/webfont-icons\/paper-clip.jpg","keywords":["Fonts","Icon Font"],"articleSection":["UI\/UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/webfont-icons\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/webfont-icons\/","url":"https:\/\/www.hongkiat.com\/blog\/webfont-icons\/","name":"Better and Sharper UI Icons with Web Fonts","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/webfont-icons\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/webfont-icons\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/webfont-icons\/paper-clip.jpg","datePublished":"2024-02-05T07:00:03+00:00","dateModified":"2024-02-05T08:12:04+00:00","description":"Are you using bitmap images like PNGs and GIFs for icons on your website? If so, you might have noticed they can be quite hefty in size, especially if","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/webfont-icons\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/webfont-icons\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/webfont-icons\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/webfont-icons\/paper-clip.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/webfont-icons\/paper-clip.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/webfont-icons\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A Guide to Better and Sharper UI Icons with Web Fonts"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-43S","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=15616"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15616\/revisions"}],"predecessor-version":[{"id":71199,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15616\/revisions\/71199"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=15616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=15616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=15616"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=15616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}