Have you tried to find the perfect icon in the available sets and failed? No worries, I’ll guide you through the process of getting your SVG into the set. It’s the only one that allows me to keep 4 custom projects at any time, which enables me to work on more than one website in the same time. Personally, I use IcoMoon on most of our projects. All of them work somewhat similarly and you can choose all or some icons from predefined sets as well as add new icons from the uploaded SVG files. These days the most popular icon generators are IcoMoon, Fontello i Fontastic. Icon generators – how to convert SVG to font icon? This kind of web font behaves identically to any other font you’re using on the site: color, text-shadow, text-stroke, opacity, transform, transition. That’s a great way to optimize the size of your website.įinally, using font generators is easy, efficient and allows us to have control over how our icons look. the whole set from Font Awesome or Glyph Icons), but you create a custom set with only what you need. Additionally, you don’t need to load a huge font file (eg. Scalability is important especially when you view the site on high-res screens like retina displays. Also, you won’t lose the advantage that an SVG file gives you – you can scale these icons as much as you like without losing the quality. Then, it’s as easy as adding a provided CSS class to your HTML code and your icon shows up on the page. These allow you to upload any number of SVG files and they build a unique set of fonts, just for your project. There are generators that allow you to convert your beloved SVG files to webfonts. No worries, there is a solution to this madness. These are easy to add to your project, but… what if you need a custom icon and none of the available shapes cut it for you? You could add it as a separate SVG file, but that increases the number of requests needed to fully load the page as well as adds to complexity in terms of maintenance – over time you may end up with dozens of such small files. Some popular options to do it are Bootstrap Glyphicons or Font Awesome. One of the more common ways of doing this is to use icons added to the website in the form of regular fonts.
0 Comments
Leave a Reply. |