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

Question

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 1

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.