{"id":17810,"date":"2012-08-22T08:00:51","date_gmt":"2012-08-22T15:00:51","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=17810"},"modified":"2015-02-25T20:12:12","modified_gmt":"2015-02-26T03:12:12","slug":"113-creating-and-using-a-custom-icon-font","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/113-creating-and-using-a-custom-icon-font\/","title":{"rendered":"#113: Creating and Using a Custom Icon Font"},"content":{"rendered":"
As we’ve said around here many times: icon fonts are awesome. They are efficient in the same way CSS sprites are efficient: lots of images usable for different areas\/purposes in one single download. But they are even more awesome than sprites because they are vector and so can scale to any size, be shadowed, change color, and more. They also look fantastic on retina displays (or displays of any size and resolution, really). <\/p>\n
To be the most efficient with your icon font, you should only load the characters that you need to load. And to be flexible, it’s nice to be able to add to a single icon font from multiple sets or from any vector\/SVG anywhere at all. The IcoMoon app lets you do all of this from it’s super simple interface. You choose the icons you want, map them to whatever characters you want, then export the HTML\/CSS\/Web Fonts in a ready to use format.<\/p>\n
Links from the video:<\/strong><\/p>\n As we’ve said around here many times: icon fonts are awesome. They are efficient in the same way CSS sprites are efficient: lots of images usable for different areas\/purposes in one single download. But they are even more awesome than sprites because they are vector and so can scale to any size, be shadowed, change […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":180891,"url":"https:\/\/css-tricks.com\/lodge\/svg\/12-getting-svg-icon-fonts-sets\/","url_meta":{"origin":17810,"position":0},"title":"12: Getting SVG – Icon Fonts & Sets","date":"August 27, 2014","format":false,"excerpt":"Remember that anything vector you can get into SVG. Adobe software is great at this. There could be vector stuff in a PDF - just open the PDF and you'll be able to get your hands on the vector parts. As we saw, stock photography sites often have things in\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3318,"url":"https:\/\/css-tricks.com\/snippets\/css\/using-font-face-in-css\/","url_meta":{"origin":17810,"position":1},"title":"How to use @font-face in CSS","date":"August 10, 2009","format":false,"excerpt":"The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS. Without the rule, our designs are limited to the fonts that\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":191494,"url":"https:\/\/css-tricks.com\/lodge\/svg\/36-using-grunticon\/","url_meta":{"origin":17810,"position":2},"title":"36: Using Grunticon","date":"December 23, 2014","format":false,"excerpt":"We've spent a lot of time talking about using inline and the element. You can build an icon system with that that is rife with advantages. You can create an SVG icon system though in other ways. You could lay out a traditional gridded sprite sheet in SVG and do\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":322735,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-optical-sizing\/","url_meta":{"origin":17810,"position":3},"title":"font-optical-sizing","date":"October 7, 2020","format":false,"excerpt":"The font-optical-sizing CSS property allows the browser to adjust the outline of font glyphs to make them more legible at different sizes. For example, smaller text may get a thicker outline to increase its contrast. On the flip side, larger text may get something that's more \"delicate\" to quote the\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":182029,"url":"https:\/\/css-tricks.com\/lodge\/svg\/14-svg-icon-system-building-defs\/","url_meta":{"origin":17810,"position":4},"title":"14: SVG Icon System – Building Out Defs","date":"September 10, 2014","format":false,"excerpt":"The element is clutch to this whole idea of an inline SVG icon system. We learned that a clean way to do it is to put everything you intend to draw later into a block so it doesn't render and we can reference them later (tell them browser to draw\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18132,"url":"https:\/\/css-tricks.com\/lodge\/v10\/015-adding-icons-to-the-navigation-with-an-icon-font\/","url_meta":{"origin":17810,"position":5},"title":"#015: Adding Icons to the Navigation with an Icon Font","date":"September 9, 2012","format":false,"excerpt":"We start by tweaking the logo type a bit, but then jump into adding icons into the main nav. When we were designing the navigation in Photoshop (Video #007) we used the icon font Entypo. Now we'll use it on the web as well. We run the font through Font\u2026","rel":"","context":"With 15 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17810"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=17810"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17810\/revisions"}],"predecessor-version":[{"id":17815,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/17810\/revisions\/17815"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=17810"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=17810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n