{"id":20027,"date":"2014-05-15T13:01:49","date_gmt":"2014-05-15T05:01:49","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=20027"},"modified":"2024-04-04T02:10:55","modified_gmt":"2024-04-03T18:10:55","slug":"create-font-icon-set","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/create-font-icon-set\/","title":{"rendered":"Create Your Own Font Icon Set Easily With Fontello"},"content":{"rendered":"<p>Font Icons have become a staple in web design, and it\u2019s clear why. They offer reliability, sharpness on high DPI screens, and the flexibility to be customized in size, color, and position with CSS. This adaptability also extends to animations, making them easy to work with using CSS3 Transforms and Transitions.<\/p>\n<p>While there are many font icon sets readily available for use, there might be occasions when these pre-existing sets don\u2019t meet your specific requirements. In such instances, the solution could be to craft your own custom icon set.<\/p>\n<p>Fortunately, with the array of tools available today, creating a personalized Font Icon set has become more accessible than ever before. This guide will walk you through the process step-by-step. Let\u2019s dive in.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/webfont-icons\/\" class=\"ref-block__link\" title=\"Read More: A Guide to Better and Sharper UI Icons with Web Fonts\" rel=\"bookmark\"><span class=\"screen-reader-text\">A Guide to Better and Sharper UI Icons with Web Fonts<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/webfont-icons.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-15616 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/webfont-icons.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">A Guide to Better and Sharper UI Icons with Web Fonts<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tAre you using bitmap images like PNGs and GIFs for icons on your website? If so, you might...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Preparing the Icons<\/h2>\n<p>First and foremost, we need to get our icons ready, and they must be in vector format. If you\u2019re adept with vector software such as Adobe Illustrator, Inkscape, or CorelDraw, you can craft your icons ensuring they share common characteristics, and then <strong>export them in SVG format<\/strong>.<\/p>\n<p>If creating your own isn\u2019t an option, fret not. There\u2019s a wealth of SVG icons freely available online for you to use.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-2\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/download-free-vector-websites\/\" class=\"ref-block__link\" title=\"Read More: 33 Best Websites to Download Free Vectors\" rel=\"bookmark\"><span class=\"screen-reader-text\">33 Best Websites to Download Free Vectors<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/download-free-vector-websites.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-53722 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/download-free-vector-websites.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">33 Best Websites to Download Free Vectors<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tVector graphics are flexible and scalable, making it perfect for both web and print. Here's websites to download...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<p>For our demonstration, we\u2019ll utilize SVG icons from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/ionic.io\/ionicons\">Ionicons<\/a>. Although Ionicons offers its own Font Icon collection, we\u2019re going to extract just a few to illustrate how you can assemble your own icon set.<\/p>\n<p>Here are the icons selected for this example:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/create-font-icon-set\/font-collected.jpg\" alt=\"Selected SVG icons for the font set\" height=\"230\" width=\"500\"><\/figure>\n<p>Since some icons are made up of multiple shapes, we need to unify them into a single compound shape before turning them into font icons. This can be done by opening the <code>.svg<\/code> file in Illustrator, selecting all the shapes, and navigating through: <strong>Object<\/strong> &gt; <strong>Compound Path<\/strong> &gt; <strong>Make<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/create-font-icon-set\/make-compound.jpg\" alt=\"Combining shapes into a compound path in Illustrator\" height=\"230\" width=\"500\"><\/figure>\n<p>Repeat this process for each of the icons.<\/p>\n<h2>Creating the Font<\/h2>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/fontello.com\/\">Fontello<\/a> simplifies the process of creating Font Icons. It not only allows you to select icons from well-known Font Icon sets but also enables the upload of external icons. Simply <strong>drag and drop your chosen icons onto Fontello\u2019s interface<\/strong>. Upon uploading, your icons will be displayed in the Custom Icons section, as shown below.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/create-font-icon-set\/custom-font-section.jpg\" alt=\"Custom Icons section on Fontello\" height=\"230\" width=\"500\"><\/figure>\n<p>To adjust your icons further, click on the pencil icon. This lets you modify the icon properties, specifically the CSS Name and the Hex Code.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/create-font-icon-set\/options.jpg\" alt=\"Editing icon properties in Fontello\" height=\"350\" width=\"500\"><\/figure>\n<p>After selecting your custom icons and naming your font, hit the <span class=\"key\">Download<\/span> button to get your icons.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/create-font-icon-set\/download-icons.jpg\" alt=\"Download button for custom font icons in Fontello\" height=\"200\" width=\"500\"><\/figure>\n<p>Fontello then generates all the necessary font formats: <code>.svg<\/code>, <code>.eot<\/code>, <code>.ttf<\/code>, and <code>.woff<\/code>, along with the stylesheets and a demo for you.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/create-font-icon-set\/generated-fonts.jpg\" alt=\"Generated font formats by Fontello\" height=\"250\" width=\"500\"><\/figure>\n<p>And just like that, creating font icons is as easy as pie. Hopefully, you\u2019ll find this guide handy.<\/p>","protected":false},"excerpt":{"rendered":"<p>Font Icons have become a staple in web design, and it\u2019s clear why. They offer reliability, sharpness on high DPI screens, and the flexibility to be customized in size, color, and position with CSS. This adaptability also extends to animations, making them easy to work with using CSS3 Transforms and Transitions. While there are many&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":[352],"tags":[894,1391],"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.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Create Your Own Font Icon Set Easily With Fontello - Hongkiat<\/title>\n<meta name=\"description\" content=\"Font Icons have become a staple in web design, and it&#039;s clear why. They offer reliability, sharpness on high DPI screens, and the flexibility to be\" \/>\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\/create-font-icon-set\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Your Own Font Icon Set Easily With Fontello\" \/>\n<meta property=\"og:description\" content=\"Font Icons have become a staple in web design, and it&#039;s clear why. They offer reliability, sharpness on high DPI screens, and the flexibility to be\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/create-font-icon-set\/\" \/>\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=\"2014-05-15T05:01:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-03T18:10:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/create-font-icon-set\/font-collected.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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-font-icon-set\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-font-icon-set\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Create Your Own Font Icon Set Easily With Fontello\",\"datePublished\":\"2014-05-15T05:01:49+00:00\",\"dateModified\":\"2024-04-03T18:10:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-font-icon-set\\\/\"},\"wordCount\":446,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-font-icon-set\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/create-font-icon-set\\\/font-collected.jpg\",\"keywords\":[\"Fonts\",\"Icons\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-font-icon-set\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-font-icon-set\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-font-icon-set\\\/\",\"name\":\"Create Your Own Font Icon Set Easily With Fontello - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-font-icon-set\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-font-icon-set\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/create-font-icon-set\\\/font-collected.jpg\",\"datePublished\":\"2014-05-15T05:01:49+00:00\",\"dateModified\":\"2024-04-03T18:10:55+00:00\",\"description\":\"Font Icons have become a staple in web design, and it's clear why. They offer reliability, sharpness on high DPI screens, and the flexibility to be\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-font-icon-set\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-font-icon-set\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-font-icon-set\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/create-font-icon-set\\\/font-collected.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/create-font-icon-set\\\/font-collected.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-font-icon-set\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Your Own Font Icon Set Easily With Fontello\"}]},{\"@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":"Create Your Own Font Icon Set Easily With Fontello - Hongkiat","description":"Font Icons have become a staple in web design, and it's clear why. They offer reliability, sharpness on high DPI screens, and the flexibility to be","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\/create-font-icon-set\/","og_locale":"en_US","og_type":"article","og_title":"Create Your Own Font Icon Set Easily With Fontello","og_description":"Font Icons have become a staple in web design, and it's clear why. They offer reliability, sharpness on high DPI screens, and the flexibility to be","og_url":"https:\/\/www.hongkiat.com\/blog\/create-font-icon-set\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-05-15T05:01:49+00:00","article_modified_time":"2024-04-03T18:10:55+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/create-font-icon-set\/font-collected.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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/create-font-icon-set\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-font-icon-set\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Create Your Own Font Icon Set Easily With Fontello","datePublished":"2014-05-15T05:01:49+00:00","dateModified":"2024-04-03T18:10:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-font-icon-set\/"},"wordCount":446,"commentCount":3,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-font-icon-set\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/create-font-icon-set\/font-collected.jpg","keywords":["Fonts","Icons"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/create-font-icon-set\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/create-font-icon-set\/","url":"https:\/\/www.hongkiat.com\/blog\/create-font-icon-set\/","name":"Create Your Own Font Icon Set Easily With Fontello - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-font-icon-set\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-font-icon-set\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/create-font-icon-set\/font-collected.jpg","datePublished":"2014-05-15T05:01:49+00:00","dateModified":"2024-04-03T18:10:55+00:00","description":"Font Icons have become a staple in web design, and it's clear why. They offer reliability, sharpness on high DPI screens, and the flexibility to be","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-font-icon-set\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/create-font-icon-set\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/create-font-icon-set\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/create-font-icon-set\/font-collected.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/create-font-icon-set\/font-collected.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/create-font-icon-set\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Your Own Font Icon Set Easily With Fontello"}]},{"@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-5d1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20027","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=20027"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20027\/revisions"}],"predecessor-version":[{"id":71658,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20027\/revisions\/71658"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=20027"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=20027"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=20027"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=20027"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}