Bootstrap 3 без Glyphicons заменен шрифтом Awesome

Я хочу удалить Bootstrap 3 Glyphicons в пользу шрифта Awesome. Поскольку Font Awesome уже включает большинство Glyphicons, вы не хотите включать их и избегать дубликатов и проблем с совместимостью.

когда я делаю настраиваемую загрузку загрузки, и я сниму компонент глификон, я все еще вижу ссылки на глификон в файле css. http://getbootstrap.com/customize/

Как я могу полностью отключить эти значки?

спасибо

Ответы

Ответ 1

Эти 6 оставшихся ссылок Glyphicons в скомпилированном CSS относятся к необязательному использованию Glyphicons для следующих кнопок + prev в компоненте Carousel. Поскольку указанные объявления также используются для кнопок next + prev не-Glyphicon и представляют собой абсолютно тривиальное количество общего размера файла, я предлагаю просто игнорировать их. Для всех практических целей вы уже устранили Глификон из своей сборки.

Если вы абсолютно должны уничтожить упомянутые ссылки, скомпилировать Bootstrap вручную, предварительно удалите оскорбительные строки из bootstrap/less/carousel.less и удалив @import "glyphicons.less"; строка из bootstrap/less/bootstrap.less.
Или вы можете просто вручную отредактировать CSS, который уже был сгенерирован для Bootstrap Customizer, поскольку соответствующие удаления тривиальны.

Ответ 2

Как я использую bootstrap с Font Awesome, я перехожу к настройке страницы, и я отключил компонент glyphicon так же, как и вы, но в течение некоторого времени я также добавлял эти строки кода в мой (переопределяющий файл)

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

также вы можете открыть основной загрузочный файл, который вы загрузили (настроили один), и выполнить поиск font-family: 'Glyphicons Halflings';, а затем прокомментировать все @font-face.

Надеюсь, это поможет вам

Ответ 3

Решение для less (проверено на загрузку 3.3.5):

Во-первых, переопределить значки для карусели:

// 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);
    }
}

Эта часть взята из ответа Slava Fomin на основе Стивена Клонца базовый код.

Следующий шаг: отключить загрузку глификонов:

//** 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";

Не забывайте о lessc ленивая загрузка: @icon-font-svg-id, а другие vars будут иметь самое последнее значение, которое вы установили.