{"id":322,"date":"2021-04-21T08:28:02","date_gmt":"2021-04-21T08:28:02","guid":{"rendered":"https:\/\/utillz.com\/docs\/heilz\/content\/import-icon-set\/"},"modified":"2024-05-20T11:50:16","modified_gmt":"2024-05-20T11:50:16","slug":"import-icon-set","status":"publish","type":"page","link":"https:\/\/utillz.com\/docs\/heilz\/content\/import-icon-set\/","title":{"rendered":"Import custom icon sets"},"content":{"rendered":"

Icons are being used almost everywhere on our themes. We support custom icon sets, which means that you can use any SVG images and convert them into an icon set for your new project. This may sound difficult, but believe me, it is a very simple process and doesn’t require any coding skills \ud83d\ude42<\/p>\n

Where to start?<\/h3>\n

First, you need to choose your awesome new icons. Thankfully, there are websites that offer tons of cool icons for free, like this one<\/a>. Once you have selected the icons you need, just save them as SVG images on your hard drive.<\/p>\n

Generate and upload a font using the IcoMoon App<\/h3>\n

IcoMoon<\/a> is a powerful platform that allows you to generate any web-compatible font using standard SVG images and more.<\/p>\n

Once you have created your account, you will see a dashboard. On the top of your dashboard, click the button Import Icons<\/strong>, and browse all the SVG images that you have previously collected.<\/p>\n

\"\"<\/p>\n

So far, so good \ud83d\ude42 As the next step, you need to toggle the icons and click Generate Font<\/strong>. On the bottom part, right next to the Download<\/strong> button, click the gear icon and a new popup will expand. Here is where you need to define some parameters about your font.<\/p>\n\r\n

\r\n Important<\/span>\r\n
\r\n
\r\n

In CSS selector, select the option to use a class. Check the example below; you can use the same parameters.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \n

\"\"<\/p>\n

Now, close the modal and click Download Font<\/strong> and save the ZIP file on your hard drive. Back to your admin dashboard, navigate to Listing Types <\/i> Icons Sets<\/strong>, create a new icon set, and name it. After publishing the post,<\/p>\n

\"\"<\/p>\n

then click the button Select icon package<\/strong>, browse your icon set zip file, and update the post. Your icons will appear under the package details.<\/p>\n

\"\"<\/p>\n

Now you should be able to see your new icon pack under the icon selection tool.<\/p>\n

\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"

Icons are being used almost everywhere on our themes. We support custom icon sets, which means that you can use any SVG images and convert …<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":317,"menu_order":14,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/utillz.com\/docs\/heilz\/wp-json\/wp\/v2\/pages\/322"}],"collection":[{"href":"https:\/\/utillz.com\/docs\/heilz\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/utillz.com\/docs\/heilz\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/utillz.com\/docs\/heilz\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/utillz.com\/docs\/heilz\/wp-json\/wp\/v2\/comments?post=322"}],"version-history":[{"count":0,"href":"https:\/\/utillz.com\/docs\/heilz\/wp-json\/wp\/v2\/pages\/322\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/utillz.com\/docs\/heilz\/wp-json\/wp\/v2\/pages\/317"}],"wp:attachment":[{"href":"https:\/\/utillz.com\/docs\/heilz\/wp-json\/wp\/v2\/media?parent=322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}