Forum Discussion

keithkelly's avatar
keithkelly
Leader
3 years ago

Notification Bell - How to change to SVG?

The default notification bell is a little bold for our branding.  I see it's using a custom icon set - is there a way to change that icon set to include images from our branding people?  Or, what's t...
UI & Design
  • AbhishekGu's avatar
    AbhishekGu
    3 years ago

    Hello keithkelly,
    When you inspect the notification bell icon, you can see a ::before CSS something like this:

    .lia-header-nav-component-widget .lia-notification-feed-page-link:before {
    color: #2525A5;
    content: "\f0a2"; or content: "\f0f3"
    display: inline-block;
    font: normal normal normal 24px/1 FontAwesome;
    font-size: 24px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    margin-right: 4px;
    text-rendering: auto;
    transform: translate(0, 0);
    }

    Here, "\f0a2" or "\f0f3" might be your community bell icon code. You can change the bell icon code from here https://fontawesome.com/icons/bell?s=solid

    Or if you want to use svg file here, then update your CSS with the following:

    .lia-header-nav-component-widget .lia-notification-feed-page-link:before {
    color: #2525A5;
    content: "\f0a2"; // remove the content
    display: inline-block;
    font: normal normal normal 24px/1 FontAwesome;
    font-size: 24px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    margin-right: 4px;
    text-rendering: auto;
    transform: translate(0, 0);
    background-image:url(/html/assets/notification-bell-icon.svg); // add it
    background-repeat: no-repeat; // add it
    height: 20px; // add it if required 
    width: 20px; // add it if required 
    }

     

AbhishekGu's avatar
AbhishekGu
Khoros Staff
3 years ago

Hello keithkelly,
When you inspect the notification bell icon, you can see a ::before CSS something like this:

.lia-header-nav-component-widget .lia-notification-feed-page-link:before {
color: #2525A5;
content: "\f0a2"; or content: "\f0f3"
display: inline-block;
font: normal normal normal 24px/1 FontAwesome;
font-size: 24px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
margin-right: 4px;
text-rendering: auto;
transform: translate(0, 0);
}

Here, "\f0a2" or "\f0f3" might be your community bell icon code. You can change the bell icon code from here https://fontawesome.com/icons/bell?s=solid

Or if you want to use svg file here, then update your CSS with the following:

.lia-header-nav-component-widget .lia-notification-feed-page-link:before {
color: #2525A5;
content: "\f0a2"; // remove the content
display: inline-block;
font: normal normal normal 24px/1 FontAwesome;
font-size: 24px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
margin-right: 4px;
text-rendering: auto;
transform: translate(0, 0);
background-image:url(/html/assets/notification-bell-icon.svg); // add it
background-repeat: no-repeat; // add it
height: 20px; // add it if required 
width: 20px; // add it if required 
}