Custom Icon(s)

Can I add my own menu icon instead of using the existing ones?

Kathy Yip avatar
Written by Kathy Yip
Updated over a week ago

Yes, its doable.

Businesses are unable to add additional icons to the existing menu, but you can override the existing icon data. Here’s how you can do it:

  1. Obtain the Eber image URL by uploading an image in the Content Page:

Example money icon URL:

2. Navigate to Customer Portal > Theme > Click on your Active Theme.

3. Paste the code in Custom Code > Edit Custom Code > CSS.

<style>

.bi-house-fill::before { background-size: 35px 35px; background-repeat: no-repeat; display: inline-block; width: 45px; height: 40px; content: "" !important; }

.bi-house-fill::before { background-image: url(https://d15k2d11r6t6rl.cloudfront.net/public/users/Integrators/c2211f6c-ac34-46d9-9fcf-28946864c5ea/business_4792/money-svgrepo-com.svg);

}

</style>

  • The house-fill indicator here shows that I will be overriding the original menu data and replacing it with the customized money icon.

  • Replace the URL with your customized URL obtained from step (1).


4. Navigate to Customer Portal > Menu. Here, you can create your own new menu list by clicking the [ + Create ] button or override the existing menu list provided by Eber by clicking the [ Pencil ].

For my case, I will be overriding the existing menu list and icon data by clicking the [ Pencil ] icon for both actions.


5. Under the menu item, select the replaced icon under Icon. In my case, I will select the house-fill icon. Hit [ Save ] and all done!

Here is how your new menu looks like:


If you wish to override other icons (or have multiple customized icons), you can view and apply them from the Icon list. The format of the CSS will be the same as per the icons naming below. For example:

bi-alarm-fill

bi-arrow-down-circle

bi-bag-fill

Did this answer your question?