Magento. How to manage Font Awesome icons

This tutorial shows how to edit Font Awesome icons in Magento.

NOTE: We strongly recommend that you backup each file prior its editing.

1. Right click the mouse and use ‘Inspect element’ tool to locate the CSS class for the icon to edit and copy the CSS class for the button.

   

2. Open the file with the css inspected rule from the server or computer using a code editor and look up the class code in it, as /skin/frontend/tm_themes/theme718/css/styles.css in our case.

   

3. The icon is set with content: “\f106”; code. You can use this Font Awesome icons reference in order to pick another icon and find its respective code value. Also, you can use search engines in order to find it.

4. We will replace the current icon with the double up arrows. After clicking on the icon, we need to copy its Unicode.

   

5. Paste the Unicode copied from the FontAwesome site to your css rule content part in skin/frontend/tm_themes/themeXXX/css/styles.css so it looks like this:

   .footer #back-top span::before {
   	display: inline-block;
   	font: normal normal normal 14px/1 FontAwesome;
   	font-size: inherit;
   	text-rendering: auto;
   	-webkit-font-smoothing: antialiased;
   	-moz-osx-font-smoothing: grayscale;  
   	transform: translate(0, 0);
   	content: "\f106";  
   	font-size: 45px; 
   	line-height: 40px;
   }

6. Save the changes and refresh the site.

   

Feel free to check the detailed video tutorial below: