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 in the form of hovering over it or clicking it.
We can achieve the desired results by using the SVG of the icon and manipulating the fill property of the SVG image. But 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 factors 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 or images as fonts will help you improve user experience. It is also easy for developers to work with icons/images as fonts rather with different images of different formats.
Once you have icons/images as fonts, you start treating them as one. You are now equipped with all the CSS properties of fonts and apply 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: https://github.com/adityatyagi/scalable-angular-folder-structure for the demo. Clone it and follow along.
I’ll be adding icons from one of the most famous sources – https://www.flaticon.com/ as fonts in the angular app.
Step 1 – Download the icons
Download the desired icons from https://www.flaticon.com/. I’ll be downloading social media icons in .svg format.
Step 2 – Converting images to fonts
For this, we’ll be using the services of https://icomoon.io/. This tool helps to not only convert the images (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 with visiting the Icomoon app.
Import the 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 angular app
After downloading the font, you’ll have a zipped file. Extract it and you’ll be with a bunch of files and folders:
Moving to our angular 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 _icon.scss.
Next, copy all the contents from style.css file from the icomoon generated file and paste it in the _icon.scss file.
Note: Make sure you have the correct path while importing the fonts. I have also added a comment in the _icon.scss file 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 _icon.scss file in our main stylesheet – style.scss
Step 4 – Fire up the engine!
I have tried to use the fonts on the landing page. Have played around with 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: https://adityatyagi.github.io/scalable-angular-folder-structure/
Code for Landing Page – HTML
Code for Landing Page – SCSS
Step 5: Enjoy!
Questions, suggestions, advice, or have some frontend development work to be done? Hit me up in the comments section or contact here!