Transformer theme and panda theme use Fontello which is a tool letting you combine icon webfonts from several different fonts. It has 2300+ icons, it also allows you to add your custom icons or adding other font icons which are not included.
Note: This is a tutorial of how to add font icons, not image icons.
Transformer theme v4 and Panda theme v2
- Download the /themes/yourtheme/fontello/config.json file, the file contains information of all predefined icons.
- Import the downloaded config.json file to fontello.
- You would find 400+ icons are selected.
- Clicking on icons which you like to add them to the package. You need to know the name of icons you just added. Mouse hover them, their names will show out, mark them down, you are going to use them later.
- If you have your own .svg icons or .svg files you got from other web fonts, you can also add them to the package by dragging them to the “Custom icon” section.
- Download the new package, and then unzip it.
- Upload the new config.json and font files to replace old ones on the /themes/yourtheme/fontello/ folder.
- Find & rename the fontello-codes.css file to icons.scss, and then upload it to replace the old one on the /themes/yourtheme/fontello/ folder.
- Find css codes of icons you just added by using their names. Add those codes to the Custom CSS code field in the Theme editor module.
- Add this code also to the custom css code field. You need to replace all “yourdomain” and “yourtheme” with your domain and the name of your theme. You can change 0105 to make browsers reload font files to avoid having caching problems.1
src: url('//yourdomain/themes/yourtheme/font-fontello/font/fontello.eot?0105#iefix') format('embedded-opentype'),
- That’s all good luck.
Transformer theme v3 and Panda theme v2
To make newly add icons showing out on the back office, you need to put the code for newly added icons to the /themes/panda/sass/font-fontello/_icons.scss file.