Bootstrap 3 without Glyphicons replaced with Font Awesome

Question

I want to remove Bootstrap 3 Glyphicons in favor of Font Awesome. Since Font Awesome already includes most of the Glyphicons y don't want to include them and avoid duplicates and compatibility problems.

when I make a customized bootstrap download and I uncheck the glyphicon component, I still see some glyphicon references on the css file. http://getbootstrap.com/customize/

How can I disable those icons entirely ?

thanks

Answer 1

Those 6 remaining Glyphicons references in the compiled CSS are regarding the optional use of Glyphicons for the next+prev buttons in the Carousel component. Since the declarations in question are also used for the non-Glyphicon next+prev buttons and represent an absolutely trivial amount of the total file size, I suggest simply ignoring them. For all practical purposes, you've already eliminated Glyphicons from your build.

If you absolutely must annihilate said references, then compile Bootstrap manually, beforehand removing the offending lines from bootstrap/less/carousel.less and removing the @import "glyphicons.less"; line from bootstrap/less/bootstrap.less.
Or you can just manually edit the CSS that the Bootstrap Customizer already generated for you, since the relevant deletions are trivial.

Answer 2

As i use bootstrap with Font Awesome, i go to customize page and I unchecked the glyphicon component as you did, but for some time i also add this lines of code at my ( override file ):

[class^="icon-"],
[class*="icon-"] {
  background: none;
}

also you can open the main bootstrap file that you downloaded ( customized one ) and search for font-family: 'Glyphicons Halflings'; , then comment all the @font-face.

Hope this will help you

Answer 3

Solution for less (tested for bootstrap 3.3.5):

First, override icons for carousel:

// 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 part is taken from Slava Fomin answer, based on Steven Clontz's base code.

Next step: disable glyphicons loading:

//** Load fonts from this directory.
@icon-font-path:          "../fonts/";
//** File name for all font files.
@icon-font-name:          "fontawesome-webfont";
//** Element ID within SVG icon file.
@icon-font-svg-id:        "fontawesomeregular";

Do not forget about lessc lazy loading: @icon-font-svg-id and other vars will have the latest value you have set.