The configurator above can be used to quickly and easily create new appicons in the style of the appicons of the ERP system Odoo. To set an icon you have to find and enter the corresponding css class. Please check the corresponding page of the icon set for this purpose:
It is also possible to use the class elsewhere and create your own configurator based on it, for example. For this purpose, the class offers a few more parameters for individualization in addition to the options shown above.
The basis of the configurator is a JavaScript class "IBO_ICON", which creates a canvas and "paints" the icon on it. If the existing class is used directly by means of a script, additional parameters can be passed. If this class is instantiated, various parameters can be passed to it (see sample code block on the right). If not, default values are used in each case.
[...]
let icon = new IBO_ICON({
'font_family': 'bootstrap-icons',
'icon_class': 'bi bi-droplet',
});
[...]
The actual creation then takes place in the "draw" method. The ID of an HTML element to which the created canvas is attached must be specified here as a parameter.
[...]
icon.draw("icon");
[...]
| Parameter | Values | Description |
|---|---|---|
| font_color | e.g. "#ffffff" | Hex color value for the text or symbol. |
| font_family | e.g. "Font Awesome 5 Free" | Font family for your text or symbol. Make sure the family is added to your page! |
| font_size | e.g. "40" | Font size for your text or symbol. |
| font_weight | e.g. "900" | Font weight for your text or symbol. |
| icon_background | e.g. "#9b4dca" | Hex color value for the background of your icon. |
| icon_class | e.g. "fas fa-address-card" | CSS class name of your symbol for the icon, the class will automatically try to find the corresponding unicode. If an unicode (parameter "icon_text") is set the class will be ignored. |
| icon_text | e.g. "Test" | The text or symbol which should be displayed on the icon. Will be preferred over the parameter "icon_class" if set. |
| icon_width | e.g. "300" | The width of your icon (in px), will also be the height of your icon. |
| odoo_version | ["11.0", "12.0", "13.0", "14.0", "15.0"] | The odoo version for which the icon should be generated. |