{"id":30457,"date":"2017-06-15T21:01:26","date_gmt":"2017-06-15T13:01:26","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=30457"},"modified":"2017-06-15T18:24:52","modified_gmt":"2017-06-15T10:24:52","slug":"icofont-free-icon-font-library","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/icofont-free-icon-font-library\/","title":{"rendered":"IcoFont Gives You 2100+ Free Icons in a Single Font File"},"content":{"rendered":"

With the rise of web fonts<\/strong> and embeddable CSS fonts<\/strong>, it\u2019s much easier nowadays to create truly unique websites from scratch.<\/p>\n

The newest trend is icon fonts<\/strong> that are usually smaller than images, much easier to scale, and they\u2019re crystal clear on all screen sizes (including retina). You can find plenty of these icon fonts online but IcoFont<\/a><\/strong> really takes the cake.<\/p>\n

This free icon typeface comes with over 2,100 icons<\/strong>, all bundled up into a single font file<\/strong>.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t3 Free Web Font Services Compared<\/a>\n\t\t\t\t<\/p>\n

You can download the raw source with all icons<\/strong> or only certain icon \u201cfamilies\u201d<\/strong> such as currency, business, social, or mobile UI (among many others).<\/p>\n

The website acts like an online documentation<\/strong> for all these icons, so you can copy\/paste the codes into your site quickly. IcoFont icons work much like FontAwesome<\/a> icons<\/strong> which, for instance, are used by default in the Bootstrap framework.<\/p>\n

Everything works through the <i><\/code> element<\/strong> that requires two CSS classes<\/strong>:<\/p>\n

    \n
  1. the default IcoFont class<\/li>\n
  2. a class for each type of icon<\/li>\n<\/ol>\n

    For example, to add a castle icon to your document you\u2019d add something like this to your layout:<\/p>\n

    \r\n<i class=\"icofont icofont-castle\"><\/i>\r\n<\/pre>\n
    You can technically add these icons to any element you like<\/strong> but the default code from IcoFont relies on <i><\/code> elements.<\/p>\n
    \"IcoFonts<\/a><\/figure>\n
    Note this library should not be confused<\/strong> with a program called Icofont<\/a> which is not a library at all but an interface for managing icon fonts inside your RoR applications. Since this program has the same name as the IcoFont library it can be tough Googling for more info.<\/p>\n
    This library is still very new<\/strong> and I can\u2019t find it on GitHub or anywhere else on the web. But, if you\u2019re looking for more info I highly encourage visiting the website<\/a> and downloading a copy. You\u2019ll find all the proper source code<\/strong> right there and you can even browse all icons by category<\/strong> to see what\u2019s in the set.<\/p>\n
    \n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tA Guide to Better and Sharper UI Icons with Web Fonts<\/a>\n\t\t\t\t<\/p>","protected":false},"excerpt":{"rendered":"
    With the rise of web fonts and embeddable CSS fonts, it\u2019s much easier nowadays to create truly unique websites from scratch. The newest trend is icon fonts that are usually smaller than images, much easier to scale, and they\u2019re crystal clear on all screen sizes (including retina). You can find plenty of these icon fonts…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1050],"tags":[2233,2383],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nIcoFont - A Free Icon Font Library with 2100+ Icons<\/title>\n<meta name=\"description\" content=\"With the rise of web fonts and embeddable CSS fonts, it's much easier nowadays to create truly unique websites from scratch. The newest trend is icon\" \/>\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\/icofont-free-icon-font-library\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"IcoFont Gives You 2100+ Free Icons in a Single Font File\" \/>\n<meta property=\"og:description\" content=\"With the rise of web fonts and embeddable CSS fonts, it's much easier nowadays to create truly unique websites from scratch. The newest trend is icon\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/icofont-free-icon-font-library\/\" \/>\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=\"2017-06-15T13:01:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/icofont-free-icon-font-library\/02-icofont-iconset-pack.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/icofont-free-icon-font-library\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/icofont-free-icon-font-library\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"IcoFont Gives You 2100+ Free Icons in a Single Font File\",\"datePublished\":\"2017-06-15T13:01:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/icofont-free-icon-font-library\\\/\"},\"wordCount\":334,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/icofont-free-icon-font-library\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/icofont-free-icon-font-library\\\/02-icofont-iconset-pack.jpg\",\"keywords\":[\"Icon Font\",\"web font\"],\"articleSection\":[\"Graphics\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/icofont-free-icon-font-library\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/icofont-free-icon-font-library\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/icofont-free-icon-font-library\\\/\",\"name\":\"IcoFont - A Free Icon Font Library with 2100+ Icons\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/icofont-free-icon-font-library\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/icofont-free-icon-font-library\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/icofont-free-icon-font-library\\\/02-icofont-iconset-pack.jpg\",\"datePublished\":\"2017-06-15T13:01:26+00:00\",\"description\":\"With the rise of web fonts and embeddable CSS fonts, it's much easier nowadays to create truly unique websites from scratch. The newest trend is icon\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/icofont-free-icon-font-library\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/icofont-free-icon-font-library\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/icofont-free-icon-font-library\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/icofont-free-icon-font-library\\\/02-icofont-iconset-pack.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/icofont-free-icon-font-library\\\/02-icofont-iconset-pack.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/icofont-free-icon-font-library\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"IcoFont Gives You 2100+ Free Icons in a Single Font File\"}]},{\"@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\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"IcoFont - A Free Icon Font Library with 2100+ Icons","description":"With the rise of web fonts and embeddable CSS fonts, it's much easier nowadays to create truly unique websites from scratch. The newest trend is icon","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\/icofont-free-icon-font-library\/","og_locale":"en_US","og_type":"article","og_title":"IcoFont Gives You 2100+ Free Icons in a Single Font File","og_description":"With the rise of web fonts and embeddable CSS fonts, it's much easier nowadays to create truly unique websites from scratch. The newest trend is icon","og_url":"https:\/\/www.hongkiat.com\/blog\/icofont-free-icon-font-library\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-06-15T13:01:26+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/icofont-free-icon-font-library\/02-icofont-iconset-pack.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/icofont-free-icon-font-library\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/icofont-free-icon-font-library\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"IcoFont Gives You 2100+ Free Icons in a Single Font File","datePublished":"2017-06-15T13:01:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/icofont-free-icon-font-library\/"},"wordCount":334,"commentCount":1,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/icofont-free-icon-font-library\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/icofont-free-icon-font-library\/02-icofont-iconset-pack.jpg","keywords":["Icon Font","web font"],"articleSection":["Graphics"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/icofont-free-icon-font-library\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/icofont-free-icon-font-library\/","url":"https:\/\/www.hongkiat.com\/blog\/icofont-free-icon-font-library\/","name":"IcoFont - A Free Icon Font Library with 2100+ Icons","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/icofont-free-icon-font-library\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/icofont-free-icon-font-library\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/icofont-free-icon-font-library\/02-icofont-iconset-pack.jpg","datePublished":"2017-06-15T13:01:26+00:00","description":"With the rise of web fonts and embeddable CSS fonts, it's much easier nowadays to create truly unique websites from scratch. The newest trend is icon","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/icofont-free-icon-font-library\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/icofont-free-icon-font-library\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/icofont-free-icon-font-library\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/icofont-free-icon-font-library\/02-icofont-iconset-pack.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/icofont-free-icon-font-library\/02-icofont-iconset-pack.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/icofont-free-icon-font-library\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"IcoFont Gives You 2100+ Free Icons in a Single Font File"}]},{"@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\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7Vf","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/30457","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\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=30457"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/30457\/revisions"}],"predecessor-version":[{"id":30459,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/30457\/revisions\/30459"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=30457"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=30457"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=30457"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=30457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}