Slava Fomin II Slava Fomin II - 1 year ago 165
Sass (Sass) Question

How to replace Glyphicons with FontAwesome in Bootstrap 3 without changing HTML?

I'm using Bootstrap 3 in my project and I'm using FontAwesome icons library instead of bundled Glyphicons.

The problem is that I have some third-party components that rely on Glyphicons and I don't want to change their HTML.

I'm including font-awesome via Bower and SASS + Compass (SCSS).

Is it possible to replace Glyphicons with FontAwesome without changing the HTML and applying another CSS classes?

Answer Source

You can use the following approach to overload Glyphicon CSS classes with FontAwesome ones using SCSS:

// Overloading "glyphicon" class with "fa".
.glyphicon {

    @extend .fa;

    // Overloading "glyphicon-chevron-left" with "fa-arrow-left".
    &.glyphicon-chevron-left {
        @extend .fa-chevron-left;

    // Overloading "glyphicon-chevron-right" with "fa-arrow-right".
    &.glyphicon-chevron-right {
        @extend .fa-chevron-right;

This solution is based on code of Steven Clontz.

Make sure, that FontAwesome SCSS is imported before this overrides.

In the above example I'm overloading the following two Glyphicons: chevron-left and chevron-right with the following FontAwesome icons: arrow-left and arrow-right respectfully.

You will need to overload all icons used in third-party components to achieve what you need.

However, consider this as a HACK and DO NOT overload ALL icons, cause it will make your CSS unnecessarily bigger!

Consider persuading your third-party vendor to implement support for different icon libraries. This will be a proper solution.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download