In this guide, we will discuss how to update your dashboard icons in the eFront system.

Note: This guide assumes that you will be using .svg icons to update your existing dashboard icons. We highly recommend that you use .svg icons since they have plenty of advantages, such as their scalability in large screens without the loss of image quality.

To start with, you need to find the CSS class of icon that you are going to update. To do so, you might find the developer tools of your browser uses to inspect the web page. Not all browsers have these developer tools options but the most modern browser (like Chrome or Firefox) do support this feature.

In the above screenshot, the icon we will update is the User icon (1) and after inspecting the page you will find out that the corresponding CSS class is .icon-user (2)

The next thing you need to do is to convert your image to base64 format. You might find it useful for this task to use some of the various online converters that exist online (such as https://www.base64-image.de/ ). then, you may upload your .svg icon, convert it and get the corresponding base64 code.

The final step you need to perform is to override the corresponding CSS class by editing your active eFront theme. Logged in as administrator, from your Administration dashboard visit Themes, select your active theme and then click on the Edit button.

Redefine the CSS rule (3) for the icon you want to update using the base64 that you have from the previous step like the following example:

.icon-user {
 background-image: url('the code that you got from the previous step');
 background-repeat: no-repeat;
}

Click to save your theme and then when you visit your dashboard you will be able to view your updated dashboard icon.