Forum Discussion

keithkelly's avatar
keithkelly
Leader
3 years ago

Has anyone purchased/implemented FontAwesome Pro?

There are some icons I'd love to leverage.  Is that just on me to buy a license & implement the font? 
UI & Design
keithkelly's avatar
keithkelly
Leader

Sweet, thanks! 

I'm mainly trying to get those icons for some of the extras that aren't included in the free library.  But, I suppose the thin icons match our branding better than the OOTB icons. 

Swapping to the thin icons - is that a matter of uploading the new set, then adding a line of CSS per icon that needs swapped?  Or is there a way to mass-redirect the icon weight to the thin variant? 

Natkinson's avatar
Natkinson
Genius
3 years ago

keithkelly I think if you're swapping icons there's probably a couple ways to go about it. There may be a better way, but what I did was identify the icon used in the default CSS and then adding custom CSS to override the Khoros default. So for the notification bell, we replaced ours with something like this:

.lia-header-nav-component-widget .lia-notification-feed-page-link:before {
    content: "\f0f3";
    font: var(--fa-font-light);
}

 for more details: https://fontawesome.com/docs/web/add-icons/pseudo-elements

I haven't found another way yet to easily replace built-in default icons.

  • keithkelly's avatar
    keithkelly
    Leader
    3 years ago

    Ok, this makes sense - thanks!