Insert icon for x-btn-widgetbar

Support
#1

Is it possible to put an icon, such as a fontawesome icon, and the button for the x-bt-widgetbar?

Currently it looks like this on my website:

Instead of the red triangle, I would like to use a house icon and be able to make it red with a blue hover.

Any ideas how I can do this?

#2

Hi there,

Thanks for writing in.

Sure, it’s possible. Please add this small CSS to your global custom CSS.

.x-btn-widgetbar {
    border-top-color: red;
    border-right-color: red;
}
.x-btn-widgetbar:hover {
    border-top-color: blue;
    border-right-color: blue;
}
.x-btn-widgetbar i:before {
    content: "\f015";
}

Hope this helps :slight_smile:

#3

Thanks for the code, but that changed the plus logo in the triangle to a house. Is there a way to change the entire triangle to a house? Or some other icon/image?

#4

Hi there,

Ah, please change that CSS to this

.x-btn-widgetbar, .x-btn-widgetbar:hover {
    border-color: transparent !important;
    font-size: 20px !important;
}
.x-btn-widgetbar {
   color: red;
}
.x-btn-widgetbar:hover {
    color: blue;
}
.x-btn-widgetbar i:before {
    content: "\f015";
}

If you wish to change it to an image, then replace this

.x-btn-widgetbar i:before {
    content: "\f015";
}

with this along with image’s URL

.x-btn-widgetbar i:before {
    content: url('http://example.com/image-1.jpg');
}
.x-btn-widgetbar:hover i:before {
    content: url('http://example.com/image-2.jpg');
}

Hope this helps.

1 Like