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...
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
}
