{"id":22373,"date":"2015-04-03T05:00:34","date_gmt":"2015-04-03T12:00:34","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=22373"},"modified":"2024-04-03T06:50:03","modified_gmt":"2024-04-03T13:50:03","slug":"how-to-create-a-simple-icon-font","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/how-to-create-a-simple-icon-font","title":{"rendered":"How to Create a Simple Icon Font"},"content":{"rendered":"<p>Icon fonts are an incredibly useful way to implement your favorite icons quickly and in almost any environment, from Photoshop to the web. Today, we&#8217;re going to learn how to create a custom icon font using the icon set of your choosing.\n<h2><span class=\"ez-toc-section\" id=\"What_Is_an_Icon_Font\"><\/span> What Is an Icon Font?<span class=\"ez-toc-section-end\"><\/span><\/h2><p>\nIcon fonts are typical fonts that simply contain symbols and glyphs instead of letters or numbers. Each character or symbol can be easily displayed in HTML or CSS. For example:\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/04\/03063043\/css_html-560x328-1.png.webp\" alt=\"css_html\" width=\"560\" height=\"328\" class=\"alignnone size-large wp-image-22403\">\nThere are some great advantages to using icon fonts instead of bitmap images:\n<\/p><ul>\n<li>\nScalability: because they are vector graphics, you can easily scale them up or down without losing their quality\t<\/li>\n<li>Fast loading time: since they have a small size, your website will load much faster than it would load if you used bitmap images<\/li>\n<li>Effects: you can add CSS3 effects and animations to them <\/li>\n<li>Lightweight: icon fonts are more efficient because they require only one http request to load one font file<\/li>\n<li>Retina display: since the icon font uses .SVG, your icons will look great on retina <\/li>\n<\/ul><h2><span class=\"ez-toc-section\" id=\"How_to_Create_an_Icon_Set\"><\/span> How to Create an Icon Set<span class=\"ez-toc-section-end\"><\/span><\/h2><p>\nTo create an icon font, you need to design your icons first and then turn them into a font. Think about the theme of your icons and the style that you want to achieve. Some popular themes are: business, technology, sports, or social media. Minimal, flat, and light design seems to be a popular trend for iconography nowadays, so you might start with this one. This type of design uses thin lines as the basic form, so just make sure you take this into consideration when you set the weight of your strokes in Illustrator.\nThe first step is to design your icons and save them as SVGs. You can use any software you want to create vector files &#8211; but now I will show you how to do it using Adobe Illustrator.\n<\/p><h3><span class=\"ez-toc-section\" id=\"Step_1\"><\/span>Step 1<span class=\"ez-toc-section-end\"><\/span><\/h3><p>\nYou can start with a 64x64px Illustrator document. Using the &acirc;&euro;&oelig;Number of Artboards&acirc;&euro; option, you can indicate the amount of artboards you want to create.\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/04\/03063052\/new_document-560x523-1.png.webp\" alt=\"new_document\" width=\"560\" height=\"523\" class=\"alignnone size-large wp-image-22396\">\n<\/p><h3><span class=\"ez-toc-section\" id=\"Step_2\"><\/span>Step 2<span class=\"ez-toc-section-end\"><\/span><\/h3><p>\nDraw an icon on each artboard. As you draw, give each artboard a logical name. This will come in handy when you save your files because it will be the name of the SVG file!\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/04\/03063057\/artboards-560x366-1.png.webp\" alt=\"artboards\" width=\"560\" height=\"366\" class=\"alignnone size-large wp-image-22408\">\n<\/p><h3><span class=\"ez-toc-section\" id=\"Step_3\"><\/span>Step 3<span class=\"ez-toc-section-end\"><\/span><\/h3><p>\nTake these things under consideration before saving:\n<\/p><ul>\n  <li>You must have transparent backgrounds<\/li>\n  <li>Glyphs will be interpreted as black <\/li>\n  <li>use the Pathfinder panel to combine overlapping shapes <\/li>\n  <li>Convert paths to filled shapes by using Expand (Object&gt;Expand; Object&gt;Path &gt;Outline Stroke)<\/li>\n<\/ul><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/04\/03063106\/expand-280x422-1.png.webp\" alt=\"expand\" width=\"280\" height=\"422\" class=\"alignnone size-medium wp-image-22401\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/04\/03063112\/outline_stroke-280x265-1.png.webp\" alt=\"outline_stroke\" width=\"280\" height=\"265\" class=\"alignnone size-medium wp-image-22395\"><h3><span class=\"ez-toc-section\" id=\"Step_4\"><\/span>Step 4<span class=\"ez-toc-section-end\"><\/span><\/h3><p>\nUse &acirc;&euro;&oelig;Save As&acirc;&euro; to export the SVG file. Select SVG from the dropdown menu and make sure the option &acirc;&euro;&oelig;Use Artboard&acirc;&euro; is checked.\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/04\/03063118\/save_as-280x316-1.png.webp\" alt=\"save_as\" width=\"280\" height=\"316\" class=\"alignnone size-medium wp-image-22394\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/04\/03063122\/dropdown_SVG-280x243-1.png.webp\" alt=\"dropdown_SVG\" width=\"280\" height=\"243\" class=\"alignnone size-medium wp-image-22406\">\nNow that your icon set is ready, you can move on to the next step!\n<\/p><h2><span class=\"ez-toc-section\" id=\"How_to_Create_an_Icon_Font\"><\/span>How to Create an Icon Font<span class=\"ez-toc-section-end\"><\/span><\/h2><p>\nCreating an icon font on your own sounds difficult, but there are lots of tools out there that make the task quick and painless. <a href=\"https:\/\/icomoon.io\">IcoMoon<\/a> is my personal favorite, so that&#8217;s what we&#8217;ll use.\nSince your icon set is done, you can now upload your files to IcoMoon. To begin, click on &acirc;&euro;&oelig;IcoMoon app&acirc;&euro; on the right side. Use the &acirc;&euro;&oelig;Import icons&acirc;&euro; button to upload your SVG files. Your set will appear at the top.\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/04\/03063128\/ico_app-560x126-1.png.webp\" alt=\"ico_app\" width=\"560\" height=\"126\" class=\"alignnone size-large wp-image-22399\">\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/04\/03063133\/import-560x50-1.png.webp\" alt=\"import\" width=\"560\" height=\"50\" class=\"alignnone size-large wp-image-22397\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/04\/03063137\/set-560x167-1.png.webp\" alt=\"set\" width=\"560\" height=\"167\" class=\"alignnone size-large wp-image-22392\">\n<\/p><h3><span class=\"ez-toc-section\" id=\"Step_1-2\"><\/span>Step 1<span class=\"ez-toc-section-end\"><\/span><\/h3><p>\nFrom the top panel, select Edit to resize your icon (if you need to). Click on <strong>Edit<\/strong>, select one icon and the Edit window will open. Here you can resize or move the icon, download the SVG file or replace it.\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/04\/03063141\/edit_button-560x289-1.png.webp\" alt=\"edit_button\" width=\"560\" height=\"289\" class=\"alignnone size-large wp-image-22407\">\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/04\/03063150\/edit_window-560x598-1.png.webp\" alt=\"edit_window\" width=\"560\" height=\"598\" class=\"alignnone size-large wp-image-22402\">\n<\/p><h3><span class=\"ez-toc-section\" id=\"Step_2-2\"><\/span>Step 2<span class=\"ez-toc-section-end\"><\/span><\/h3><p>\nFrom the hamburger menu, select all icons (the selected ones will have a yellow frame). Click  <strong>Generate Font<\/strong> at the bottom of the page. Add a font name. Now download your font and add it to your CSS.\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/04\/03063155\/select_all-560x200-1.png.webp\" alt=\"select_all\" width=\"560\" height=\"200\" class=\"alignnone size-large wp-image-22393\">\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/04\/03063159\/generate_font-560x317-1.png.webp\" alt=\"generate_font\" width=\"560\" height=\"317\" class=\"alignnone size-large wp-image-22400\">\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/04\/03063204\/download-560x321-1.png.webp\" alt=\"download\" width=\"560\" height=\"321\" class=\"alignnone size-large wp-image-22405\">\nThe downloaded .zip file contains the font in various formats (.eot, .svg, .ttf, .woff), a demo file, a .json file that you can use to restore your project and a .css file.\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/04\/03063210\/icomoon-280x197-1.png.webp\" alt=\"icomoon\" width=\"280\" height=\"197\" class=\"alignnone size-full wp-image-22398\">\nThis is an example of how the CSS will look:\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/04\/03063216\/css-560x346-1.png.webp\" alt=\"css\" width=\"560\" height=\"346\" class=\"alignnone size-large wp-image-22404\">\n\n<\/p><h2><span class=\"ez-toc-section\" id=\"Try_It_Out\"><\/span>Try It Out!<span class=\"ez-toc-section-end\"><\/span><\/h2><p>\nUsing an icon font saves a lot of time and fixes all your problems with size, effects, retina display and performance. There are some solid alternatives to IcoMoon, such as <a href=\"http:\/\/fontastic.me\" target=\"_blank\" rel=\"noopener\">fontastic.me<\/a> and <a href=\"http:\/\/fontello.com\" target=\"_blank\" rel=\"noopener\">fontello.com<\/a>.  Try them and see which one suits your project needs best.\nIn the meantime, if you need some inspiration to design your icons, check out these great icon sets:\n    <figure id=\"card-227285-95811692\" class=\"product-card full no-pinit\" data-product-id=\"227285\" data-index=\"0\" data-width=\"full\" data-pin_it=\"no-pinit\" data-module=\"Product Embed\" data-block-id=\"95811692\"><\/figure>\n    \n<a href=\"https:\/\/creativemarket.com\/LarisaDeac\/227285-Minimalistic-icon-set\" target=\"_blank\" rel=\"noopener\">Minimalistic icon set<\/a> by <a href=\"https:\/\/creativemarket.com\/LarisaDeac\" target=\"_blank\" rel=\"noopener\">Larisa Deac<\/a>\n    <figure id=\"card-20851-1110217913\" class=\"product-card full no-pinit\" data-product-id=\"20851\" data-index=\"0\" data-width=\"full\" data-pin_it=\"no-pinit\" data-module=\"Product Embed\" data-block-id=\"1110217913\"><\/figure>\n    \n<a href=\"https:\/\/creativemarket.com\/webalys\/20851-1640-ios-8-icons-Streamline-Icons?utm_source=CMblog&amp;utm_medium=link&amp;utm_campaign=How+to+create+an+icon+font+with+Illustrator+and+IcoMoon&amp;u=LarisaDeac\" target=\"_blank\" rel=\"noopener\">Streamline Icons<\/a> by <a href=\"https:\/\/creativemarket.com\/webalys\" target=\"_blank\" rel=\"noopener\">Vincent Le Moign<\/a>\n    <figure id=\"card-181292-316506188\" class=\"product-card full no-pinit\" data-product-id=\"181292\" data-index=\"0\" data-width=\"full\" data-pin_it=\"no-pinit\" data-module=\"Product Embed\" data-block-id=\"316506188\"><\/figure>\n    \n<a href=\"https:\/\/creativemarket.com\/LarisaDeac\/181292-Healthcare-Icons\" target=\"_blank\" rel=\"noopener\">Healthcare Icons<\/a> by <a href=\"https:\/\/creativemarket.com\/LarisaDeac\" target=\"_blank\" rel=\"noopener\">Larisa Deac<\/a>\n    <figure id=\"card-107723-1731885870\" class=\"product-card full no-pinit\" data-product-id=\"107723\" data-index=\"0\" data-width=\"full\" data-pin_it=\"no-pinit\" data-module=\"Product Embed\" data-block-id=\"1731885870\"><\/figure>\n    \n<a href=\"https:\/\/creativemarket.com\/Icojam\/107723-2090-icons-in-UniGrid-set\" target=\"_blank\" rel=\"noopener\">2090 icons in UniGrid set<\/a> by <a href=\"https:\/\/creativemarket.com\/Icojam\" target=\"_blank\" rel=\"noopener\">Icojam<\/a>\n    <figure id=\"card-186733-1150207692\" class=\"product-card full no-pinit\" data-product-id=\"186733\" data-index=\"0\" data-width=\"full\" data-pin_it=\"no-pinit\" data-module=\"Product Embed\" data-block-id=\"1150207692\"><\/figure>\n    \n<a href=\"https:\/\/creativemarket.com\/webiconset\/186733-Squid-Ink-Flat-Icon-Pack\" target=\"_blank\" rel=\"noopener\">Squid Ink Flat Icon Pack<\/a> by <a href=\"https:\/\/creativemarket.com\/webiconset\" target=\"_blank\" rel=\"noopener\">Web Icon Set<\/a>\n<\/p><hr><em>Larisa Deac is a designer and photographer from Romania, who lives and works in Finland. She creates user interfaces and prototypes for web and mobile at Affecto (part of Affecto Design team). In her free time, she creates resources for designers and photographers on <a href=\"https:\/\/creativemarket.com\/LarisaDeac\" target=\"_blank\" rel=\"noopener\">Creative Market<\/a> and runs a design blog at <a href=\"http:\/\/www.larisadeac.com\/design-blog\/\" target=\"_blank\" rel=\"noopener\">www.larisadeac.com<\/a>\n<hr>\n<a href=\"https:\/\/creativemarketsurvey.wufoo.com\/forms\/write-for-the-creative-market-blog\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/04\/03061538\/getpaidtowrite-banner.jpg.webp\" alt=\"getpaidtowrite-banner\" width=\"680\" height=\"100\" class=\"alignnone size-full wp-image-21358\">\n <\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Icon fonts are an incredibly useful way to implement your favorite icons quickly and in almost any environment, from Photoshop to the web. Today, we&#8217;re going to learn how to create a custom icon font using the icon set of your choosing. What Is an Icon Font? Icon fonts are typical fonts that simply contain [&hellip;]<\/p>\n","protected":false},"author":86,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[74],"tags":[63,79,166,899],"topics":[],"class_list":["post-22373","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-icons-2","tag-graphics","tag-fonts","tag-iconography"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v28.4 (Yoast SEO v28.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create a Simple Icon Font - Creative Market Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativemarket.com\/blog\/how-to-create-a-simple-icon-font\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Simple Icon Font\" \/>\n<meta property=\"og:description\" content=\"Icon fonts are an incredibly useful way to implement your favorite icons quickly and in almost any environment, from Photoshop to the web. Today, we&#039;re\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativemarket.com\/blog\/how-to-create-a-simple-icon-font\" \/>\n<meta property=\"og:site_name\" content=\"Creative Market Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crtvmrkt\" \/>\n<meta property=\"article:published_time\" content=\"2015-04-03T12:00:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-03T13:50:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/04\/03063043\/css_html-560x328-1.png.webp\" \/>\n<meta name=\"author\" content=\"Larisa Deac\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:site\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Larisa Deac\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/how-to-create-a-simple-icon-font\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/how-to-create-a-simple-icon-font\",\"name\":\"How to Create a Simple Icon Font - Creative Market Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/how-to-create-a-simple-icon-font#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/how-to-create-a-simple-icon-font#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2015\\\/04\\\/03063043\\\/css_html-560x328-1.png.webp\",\"datePublished\":\"2015-04-03T12:00:34+00:00\",\"dateModified\":\"2024-04-03T13:50:03+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#\\\/schema\\\/person\\\/0b6794dc0377c373a37a10ef9171c055\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/how-to-create-a-simple-icon-font#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativemarket.com\\\/blog\\\/how-to-create-a-simple-icon-font\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/how-to-create-a-simple-icon-font#primaryimage\",\"url\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2015\\\/04\\\/03063043\\\/css_html-560x328-1.png.webp\",\"contentUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2015\\\/04\\\/03063043\\\/css_html-560x328-1.png.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/how-to-create-a-simple-icon-font#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a Simple Icon Font\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\",\"name\":\"Creative Market Blog\",\"description\":\"Creative Market Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a Simple Icon Font - Creative Market Blog","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:\/\/creativemarket.com\/blog\/how-to-create-a-simple-icon-font","og_locale":"en_US","og_type":"article","og_title":"How to Create a Simple Icon Font","og_description":"Icon fonts are an incredibly useful way to implement your favorite icons quickly and in almost any environment, from Photoshop to the web. Today, we're","og_url":"https:\/\/creativemarket.com\/blog\/how-to-create-a-simple-icon-font","og_site_name":"Creative Market Blog","article_publisher":"https:\/\/www.facebook.com\/crtvmrkt","article_published_time":"2015-04-03T12:00:34+00:00","article_modified_time":"2024-04-03T13:50:03+00:00","og_image":[{"url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/04\/03063043\/css_html-560x328-1.png.webp","type":"","width":"","height":""}],"author":"Larisa Deac","twitter_card":"summary_large_image","twitter_creator":"@creativemarket","twitter_site":"@creativemarket","twitter_misc":{"Written by":"Larisa Deac","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativemarket.com\/blog\/how-to-create-a-simple-icon-font","url":"https:\/\/creativemarket.com\/blog\/how-to-create-a-simple-icon-font","name":"How to Create a Simple Icon Font - Creative Market Blog","isPartOf":{"@id":"https:\/\/creativemarket.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativemarket.com\/blog\/how-to-create-a-simple-icon-font#primaryimage"},"image":{"@id":"https:\/\/creativemarket.com\/blog\/how-to-create-a-simple-icon-font#primaryimage"},"thumbnailUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/04\/03063043\/css_html-560x328-1.png.webp","datePublished":"2015-04-03T12:00:34+00:00","dateModified":"2024-04-03T13:50:03+00:00","author":{"@id":"https:\/\/creativemarket.com\/blog\/#\/schema\/person\/0b6794dc0377c373a37a10ef9171c055"},"breadcrumb":{"@id":"https:\/\/creativemarket.com\/blog\/how-to-create-a-simple-icon-font#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativemarket.com\/blog\/how-to-create-a-simple-icon-font"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creativemarket.com\/blog\/how-to-create-a-simple-icon-font#primaryimage","url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/04\/03063043\/css_html-560x328-1.png.webp","contentUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2015\/04\/03063043\/css_html-560x328-1.png.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/creativemarket.com\/blog\/how-to-create-a-simple-icon-font#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativemarket.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create a Simple Icon Font"}]},{"@type":"WebSite","@id":"https:\/\/creativemarket.com\/blog\/#website","url":"https:\/\/creativemarket.com\/blog\/","name":"Creative Market Blog","description":"Creative Market Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creativemarket.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/22373","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/users\/86"}],"replies":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/comments?post=22373"}],"version-history":[{"count":0,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/22373\/revisions"}],"wp:attachment":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/media?parent=22373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/categories?post=22373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/tags?post=22373"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/topics?post=22373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}