Forum Discussion

keithkelly's avatar
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...
  • AbhishekGu's avatar
    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
    }