Thanks to the internet and an awesome community of designers, there are now plenty of high-quality open source icon sets that you can download free of charge and customize according to your needs, here are a few of these. However, icons design takes a lot of time and effort, thus it is hard to create custom icons for every project. It allows us to use a little less text than we normally would needed and helps people to navigate through our designs quicker. In your theme’s designers, icons are an amazing tool for building layouts and apps that are quicker to interact with. To ensure that your icons display at the correct size, you’ll have to add some additional CSS to your Shopify theme.
Under the Fontastic publish screen, choose the SVG sprite tab.
The link stays the same, and it’s this link that you can use in the of your theme to connect your website or theme to your SVG sprite. This means you can update it at any time, and simply republish. One excellent feature of Fontastic is that it generates a single permanent code snippet for your SVG sprite. You can also find manual instructions on how to embed your SVG sprite on the Fontastic website. We can do this a few ways, the simplest way is to use an easy embed code snippet. Now that we’ve created our icon set, we need to link it to our website or theme. Choosing how you want to embed your icon system The customize tab will allow you to update the name of each icon in your icon system. Often, the names of these are imported from the name of your uploaded SVG. Once you’ve chosen the icons you wish to use in your SVG icon system, you can also customize what those icons will be called later on. Choosing from an existing icon library like Font Awesome. If you’re only using 10 of them throughout your site, there is no good reason to link to the entire Fontawesome library of icons. To save on load times and improve performance, I would recommend always creating icon systems that include only the icons that you will use. Choosing from existing icon setsĪlternatively, you can build a custom icon system from existing icon libraries. Click Import icons, then choose your SVG font, or custom SVG icons.
You can add individual icons the same way, or to an existing set that you’ve already created.
0 kommentar(er)
