Problems with PNG or GIF files and using them as regular images for icons.
- Size – I had to create many different sized versions of the same icon which is inefficient and time consuming.
- Color – I had to create big sprites of icons when I needed different colors of the same icons.
- Retina display – every icon image needed another version for retina display which is also time consuming and more difficult to maintain.
- Effects – there was a limited amount of effects I could do on images; for example, it wasn’t easy to make a smooth color transition.
- Exporting images – exporting bigger sets of icons was really time consuming when I had too many icons and they were all designed in a specific style.
- Code – there were many lines of code I had to manually type into my CSS to set up all the images under specific classes and sizes.
- Performance – images add weight and more http requests which only slows down your entire website.
Well, what if I told you that icon fonts solve all of these problems and are super easy to use, maintain or even to create your own? Additionally, this new method is very well supported by all major browsers. So, let me first explain what an icon font is…
What is icon font?
Icon font is nothing more than a typical font that you’ve been already using in your projects. When you look closer into a font file, you’ll see that it’s just a table of characters. Each character is a vector shape. Now, you can simply replace those vector shapes representing characters with any shapes you want.
Using that method
- Create Your own- you can create your own font full of your own shapes that can be used in the same way as you display text in HTML.
- Resize- As you can assume, your icons can be resized to any size you want.
- Color- you can easily change their color and even apply any CSS3 effects or animations like you would do on any text.
- Efficient- Moreover, icon fonts are more efficient because they are not so heavy and require only one http request to load one font file.
Font icons fixed my problems with: size, color, retina display, effects, code and performance.
However, it was still difficult to maintain it and create my own sets.
Fontastic.me comes to your rescue
- 11 Dec 2017 Emberjs achieve two way binding with native input tag and discard input helper
- 11 Dec 2017 Ember js concatenate all third party js files present under vendor folder to vendor js
- 10 Dec 2017 Stakeholders agree to the requirement and then later on says this does not serve my purpose
- 10 Dec 2017 Sheet comparison of frontend js frameworks
- 11 Nov 2017 Why is it so hard to develop good software
- 04 Sep 2017 Is Graphql here to replace REST Api
- 05 Jun 2017 My awesome list of english songs
- 29 May 2017 Troll software intern
- 17 May 2017 What is icon font and why use it over png.
- 16 May 2017 Philosophical difference between ruby and python.
- 15 May 2017 Given an array, find number of subsets with k elements, where absolute difference between the maximum and mininmum element is at most x
- 15 May 2017 Automated testing of google autocomplete using cucumber and capybara
- 15 May 2017 How to manage assets in rails, difference between app, vendor and lib assets, what is asset pipeline?
- 15 May 2017 Swap elements in dom by drag and drop.
- 15 May 2017 What are the options with which protect_with_forgery is called?
- 15 May 2017 How to add csrf in ember app.
- 15 May 2017 Sessions and csrf in rails.
- 15 May 2017 Best practices while using ooor gem for making rpc calls to odoo(openerp) from ruby framework
- 09 May 2017 Integrate paytm payment with rails app
- 08 May 2017 Automated deployment on github pages using jekyll themes.
- 01 May 2017 How to add inline image in gmail.
- 01 May 2017 Undefined method `user_confirmation_path' error with devise rails.