How to Change the Chat Widget Icon on the HighLevel Chat Widget

SEARCH OUR BLOG

CATEGORIES

Categories

FOLLOW US

So want something different from the double chat bubble icon that comes default for the HighLevel chat widget?

Lucky for you there’s a simple bit of code that you can use to change the icon to anything you find in the FontAwesome Free library of icons!

Here’s the code you’ll add below the HighLevel Chat widget code:

<style>
.icon.widget-open-icon svg {
    display: none !important;}

.icon.widget-open-icon:before {
    content: "f179"; 
    font-family: 'FontAwesome';}
</style>

In the line where it says “content” you’ll replace that with the corresponding Unicode found on the FontAwesome icon page.

Choose FontAwesome Unicode

That’s all it takes! Be sure to refresh your dashboard if you’re using the chat widget inside of the HighLevel backend and enjoy!