Due to the many customized modules around vTigerCRM, here is a tutorial on how to add missing icons, and how to customize them.

By default, all the native modules of vTigerCRM have a specific icon. In Se7en we used the standar vtiger icons, in BePo we used the Themify icon set available here.

For all the native modules, we set a customized icon from Themify, for all the remaining icons we set a default folder icon.

So every time we will upload a new module, by default it will appear a folder icon.

How to customize icon of new modules on BePo 

To customize the icon of the just installed module, we should know the exact name of module, and the exact number of the icon content, and put them on our css file themify-icons.css (/root/layouts/myctheme/skins/vtiger) the line:

.ti-modulename:before { content: "\numberOficon";}

For example we just installed the Module VTEForecast, we should add a chart icon, so:

.ti-vteforecast:before { content: "\e6ba";}


You can have the icon content code by inspecting element with mouse on themify icons.

How to inspect element (3 ways)
  • First of all go to Themify Website Icons here;
  • You can Right-click something on the page (or a blank area) and choose Inspect;
  • Or enter the Ctrl+Shift+I keyboard shortcut;
  • Or use the Chrome menu to access the More Tools > Developer tools option

Then click on the name class icon like the image above, then click on before element, and on the right you will have the content code.

How to submit image instead of icon

But, in some case, Themify doesn't have all the icons we want, like, for example, a pdf icon! So we can also add it as an image; once we choose a png image , we should add two lines like this: 

.ti-pdfmaker,.ti-pdf.maker {background-image: url(../images/pdf.png);width: 24px;height: 24px;background-repeat: no-repeat;}

and a line to not overlap the pdf icon on the folder icon

[class^="ti-pdf.maker"]:before, [class^="ti-pdfmaker"]:before { width: 1em;content: ' '!important;}

Just in this case we used 2 class, ti-pdf.maker and ti-pdfmaker, because PDFMaker is written in its code line in these 2 different ways

If you need or want a completely new icon set, please feel free to contact us to find the best solution for you. 



Posted at 20 Mar, 2018


Previous PostView types in MYC Customer Portal
Next PostFask Theme, the ultimate vTiger7 responsive theme