Transformer theme v4.5.1+ and Panda theme v2.6.1+
Upgraded to use https://www.fluttericon.com/ instead of Fontello, because fluttericon has more icons than Fontello, but the name is still fontello for backward compatibility purpose, don't be confused.
The easybuilder uses the font icons of your theme, so when you add some new font icons to your theme, they all be also available in the easybuilder module.
- If you are using a child theme, then do this to the parent theme, not the child theme.
- Find the /themes/yourtheme/font-fontello/config.json file in the installation package of your theme.
- Import it to https://www.fluttericon.com/
- You would find 600+ icons are pre-selected, genneral don't cancle them, just click to add new ones. 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 to replace old one in the /themes/yourtheme/font-fontello/ folder.
- Convert the .ttf file to a fontello.woff and a fontello.woff2 (IMPORTANT the "f" should be in lowercase "fontello", not Fontello), here is a online tool https://cloudconvert.com/ttf-converter to to the convertion, and then upload them to the /themes/yourtheme/font-fontello/font/ folder to repalce existing ones.
- Upload the new config.json to this tool, you will get a zip containing fontello.js, fontello.css and icons.scss, upload them to the /themes/yourtheme/font-fontello/ folder. You also get a piece of code, replace all "yourdomain" and "yourtheme" with your domain and the name of your theme.Add the to the Custom CSS code field in the Theme editor module, if you are using the easybuilder module, add it to the custom css code field in the theme editor panel.
- If everything works as expected, then backup the /themes/yourtheme/font-fontello/ folder, apply the backup after every theme upgrade.
Transformer theme v4.0 - 4.5.0 and Panda theme v2.0 - 2.6.0
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.
- Download the /themes/yourtheme/fontello/config.json file, the file contains information of all predefined icons.
- Import the downloaded config.json file to http://fontello.com/
- 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 in the /themes/yourtheme/fontello/ folder.
- Find & rename the fontello-codes.css file to icons.scss, and then upload it to replace the old one in 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
2
3
4
5
6
7
8
9
10
11@font-face {
font-family: 'fontello';
src: url('//yourdomain/themes/yourtheme/font-fontello/font/fontello.eot?0105');
src: url('//yourdomain/themes/yourtheme/font-fontello/font/fontello.eot?0105#iefix') format('embedded-opentype'),
url('//yourdomain/themes/yourtheme/font-fontello/font/fontello.woff2?0105') format('woff2'),
url('//yourdomain/themes/yourtheme/font-fontello/font/fontello.woff?0105') format('woff'),
url('//yourdomain/themes/yourtheme/font-fontello/font/fontello.ttf?0105') format('truetype'),
url('//yourdomain/themes/yourtheme/font-fontello/font/fontello.svg?0105#fontello') format('svg');
font-weight: normal;
font-style: normal;
} - That's all good luck.
Transformer theme v3 and Panda theme v2
Video guide: Add new web font icons to fontello for Transformer theme v3 and Panda theme v1
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.
Easycheckout module
- Download the /modules/steasycheckout/views/font/config.json file, the file contains information of all predefined icons.
- Import the downloaded config.json file to http://fontello.com/
- You will find 50+ icons are selected.
- Clicking on icons which you like to add them to the package.
- 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.
- Find & upload these files config.json, fontello-codes.css, fontello.eot, fontello.svg,, fontello.ttf, fontello.woff, fontello.woff2 to replace the old ones in the /modules/steasycheckout/views/font/ folder.
- You may need to the Smarty cache and your browser cache to make new icons show out, that's all good luck.