15

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?

Siguza
  • 21,155
  • 6
  • 52
  • 89
Slava Fomin II
  • 26,865
  • 29
  • 124
  • 202

3 Answers3

21

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.

Slava Fomin II
  • 26,865
  • 29
  • 124
  • 202
  • 1
    I agree with this answer and have done this exact scenario switching from Font Awesome to Icomoon. I would add though that Glyphicon will need to be slowly switched out to the correct FA icons so it doesn't load both sets. – austinthedeveloper Oct 31 '14 at 20:52
  • When importing FontAwesome SCSS I got a problem with the loading of the actual fonts, I had to set the font path with `$fa-font-path: "/bower_components/font-awesome/fonts";`, not sure if there is a better way to do this? – Patricia Garcia Feb 16 '15 at 14:45
  • @PatriciaGarcia I think it's a correct way of specifying font path. However, I do not expose `bower_components` directory directly to the web, I expose only specific files or directories that I need. It can be easily achieved using symlinks under Linux. This will also help to reduce the size of your build. – Slava Fomin II Feb 17 '15 at 16:09
  • Great point @SlavaFominII, this was just a test project that I was running locally so I haven't thought too much about performance but exposing the whole `bower_components` directory is indeed a bad idea. – Patricia Garcia Feb 20 '15 at 12:22
10

In pure CSS just define glyphicon class with same properties as font-awesome class (.fa) and make correspondance with desired icons :

.glyphicon{
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.glyphicon-chevron-left:before{
    content:"\f053"
}
.glyphicon-chevron-right:before{
    content:"\f054"
}
hugsbrugs
  • 3,501
  • 2
  • 29
  • 36
  • This avoids all the 'transpiling from SCSS' monstrosity. Well done – tonysepia Dec 29 '18 at 18:52
  • I already had this in our codebase and it wasn't showing up anymore after an upgrade in font awesome to v5 free (it seemingly should have worked cuz the unicode hadn't changed for each icon). All I had to do was add font-weight: 700 for it to show up. .glyphicon:before { font-weight: 700; } – JesseDahl Jun 06 '19 at 23:50
  • just to add that you need to have the following line in your , otherwise it wont work: – dota May 19 '20 at 07:15
7

I made this Gist to map all glyphicon icons to font-awesome. I'd estimate it has around 95% accuracy and coverage (glyphicon has some useless icons that font-awesome doesn't).

https://gist.github.com/blowsie/15f8fe303383e361958bd53ecb7294f9

code removed in favor of gist

Even though this does over load all icons if you remove all of the glyphicon icons from your bootstrap build youll actually be saving a few bytes (- font awesome of course)

Blowsie
  • 40,239
  • 15
  • 88
  • 108