There are a lot of use cases wherein we need to control the styling of icons and images based on user behavior. These use-cases come into picture when the user interacts with the icons/images as hovering over it or clicking it.
We can achieve the desired results by using the SVG of the icon and manipulating the
fillproperty of the SVG image. To be honest, that is too much work. It also reduces the readability of the code.
What can we achieve with it?
Impeccable user experience is one of the most important and deciding factor for user retention. A product’s success is not only gauged from the number of new users/visitors, but also from repeated/recurring users.
Therefore, practicing this method of importing icons as fonts will help you improve user experience. It is also easy for developers to work with icons/images as fonts in comparison with different images of different formats.
Once you have icons as fonts, you treat them as one. You are now equipped with all CSS properties of fonts and can now apply to them. Some of them are:
- Changing font-size (alters the size of the icon/image)
- Changing color
- Changing background-color
I’ll be using the following repo: Scalable Angular Folder Structure for demo. Clone it and follow along.
I’ll be adding icons from one of the most famous sources — Flaticon as fonts in the angular app.
Step 1: Download the icons
Download the desired icons from Flaticon. I’ll be downloading social media icons in
Step 2: Converting icons to fonts
For this, we’ll be using the services of Icomoon. This tool helps to not only convert the icons (
svg) to fonts, but also helps to keep related icons in a group (or set as they call it). That is a pretty neat feature. We can also create an account and manage all our icons project-wise. To be honest, all this and that too in a free tool — IMPRESSIVE!
Start by visiting the Icomoon app.
ImImport SVG icons using the Import Icons button and it will create a list of all your icons in an Untitled Set.
Then, select all the icons by clicking on them.
Click on the Generate Font button in the bottom-right corner. This will generate fonts for your SVG icons and will give an option to download the fonts. The download option will come in the bottom-right corner.
Step 3: Importing generated fonts in your app
After downloading the fonts, you’ll have a zipped file. Extract it and you’ll see a bunch of files and folders like below:
Moving to our application in the assets folder, create an icon folder. Put all the files from the fonts folder which you get from the Icomoon.
Next, we create a folder scss, again inside the assets folder. We’ll add another nested folder inside scss folder — modules. There we’ll make a file
Next, copy all the contents from Icomoon generated
style.css and paste it in the
Make sure you have the correct path while importing the fonts. I have also added a comment in the– Aditya Tyagi
_icons.scssfile so that you do not miss it.
Now, you have all the icons as classes now.
- Facebook — icon-facebook-logo
- Instagram — icon-instagram-logo
- LinkedIn — icon-linkedin-logo
- Twitter — icon-twitter
- YouTube — icon-youtube
Next, we import the
_icons.scss file in our main stylesheet —
Step 4: Fire up the engine!
I have tried to use the fonts on the landing page and modified some CSS properties like color, font-size, and backgrounds of the icons. I have also added styling to the facebook icon when you hover over it. Check it out here.
Code for Landing Page – HTML
Code for Landing Page – SCSS
Step 5: Enjoy!
Thank you for your time. I hope I could bring value.
I’m reachable on some social media channels, so consider checking me on:
- Twitter especially if you’re into programming and software development.
- LinkedIn if you want to get in touch for some collaboration opportunity.
2 comments / Add your comment below
hey, nice article, I didn’t know about iconmoon or svg to font thing. What I use to do is mask the svg image using background color but yes it has some compatibility issue but if our target audience is safari and chrome then it is quite handy.
Thanks! Glad you found it helpful.