Как заменить Glyphicons на FontAwesome в Bootstrap 3 без изменения HTML?

Я использую Bootstrap 3 в своем проекте, и я использую FontAwesome, а не в комплекте Glyphicons.

Проблема в том, что у меня есть сторонние компоненты, которые полагаются на Glyphicons, и я не хочу менять их HTML.

Я включаю шрифт-awesome через Bower и SASS + Compass (SCSS).

Можно ли заменить Glyphicons на FontAwesome без изменения HTML и применения других классов CSS?

Ответ 1

Вы можете использовать следующий подход для перегрузки Glyphicon классов CSS с FontAwesome с использованием 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;
    }
}

Это решение на основе кода Стивена Клонца.

Убедитесь, что FontAwesome SCSS импортирован до того, как это переопределит.

В приведенном выше примере я перегружаю следующие два глификона: шеврон-левый и шеврон-правый со следующими значками FontAwesome: arrow-left и arrow-right.

Вам нужно будет перегрузить все значки, используемые сторонними компонентами, для достижения того, что вам нужно.

Однако рассмотрите это как HACK и НЕ перегружать ВСЕ значки, потому что это сделает ваш CSS излишне большим!

Попробуйте убедить стороннего поставщика реализовать поддержку различных библиотек иконок. Это будет правильное решение.

Ответ 2

Я сделал этот Gist, чтобы сопоставить все значки глификона с шрифтом-awesome. Я бы оценил, что он имеет около 95% точности и охвата (у глификона есть некоторые бесполезные иконки, которые не удивительны шрифту).

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

code removed in favor of gist

Несмотря на то, что это перегружает все значки, если вы удаляете все значки с символом глификона из вашей сборки бутстрапа, вы фактически сохраняете несколько байтов (шрифт, конечно же, конечно)

Ответ 3

В чистом CSS просто определите класс glyphicon с такими же свойствами, как font-awesome class (.fa), и сделайте соответствующие значки:

.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"
}