Как использовать глифы в начальной загрузке 3.0

79

Я уже использовал глификоны в bootstrap 2.3, но теперь я обновился до bootstrap 3.0. Теперь я не могу использовать свойство значка.

В bootstrap 2.3 ниже работает тег

<i class="icon-search"></i>

В bootstrap 3.0 он не работает.

  • 1
    Привет всем, я сделал то же самое и проследил за структурой, но не получил правильный глификон ... Вместо глификона отображается неопознанное изображение типа 0101
  • 0
    Спасибо, на самом деле проблема была в том, что я использовал .less файл напрямую, не конвертируя его в css ... упс
Показать ещё 2 комментария
Теги:
twitter-bootstrap-3

9 ответов

111

Значки (глификоны) теперь содержатся в отдельном файле css...

Разметка изменилась на:

<i class="glyphicon glyphicon-search"></i>

или

<span class="glyphicon glyphicon-search"></span>

Ниже приведен полезный список изменений для Bootstrap 3: http://bootply.com/bootstrap-3-migration-guide

  • 5
    Привет всем, я сделал то же самое и проследил за структурой, но не получил правильный глификон ... Вместо глификона отображается неопознанное изображение типа 0101
  • 0
    Можете ли вы показать свой код, который включает в себя загрузчик и глифы CSS? Вы видите какие-либо ошибки в консоли браузера?
Показать ещё 9 комментариев
27

Там вы идете:

<i class="glyphicon glyphicon-search"></i>

Дополнительная информация:

http://getbootstrap.com/components/#glyphicons

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

  • 1
    Bootply Migration экономит много времени на преобразование кода в TWB 3. Очень полезно, @Michael / Buhake-Sindi.
18

Если вы загрузите настроенный дистрибутив bootstrap 3, вы должны:

  • Загрузите полный дистрибутив из https://github.com/twbs/bootstrap/archive/v3.0.0.zip
  • Раскройте и загрузите всю папку с именем fonts в ваш каталог загрузки. Поместите вместе с другими папками "css, js".

Пример до:

\css
\js
index.html

Пример после загрузки:

\css
\fonts
\js
index.html
  • 0
    Это прекрасно работает (январь 2016 года). Спасибо, что поделился!
6

Если вы используете меньше, и не загружаете шрифт значков, вы должны проверить путь шрифта перейдите в файл variable.less и измените путь @icon-font-path, который сработал у меня.

4

Bootstrap 3 требует тега span, а не i

<span class="glyphicon glyphicon-search"></span>`
3

Если вы используете grunt для создания своего приложения, возможно, что во время сборки изменения пути. В этом случае вам нужно изменить свой файл grunt следующим образом:

copy: {
        main: {
            files: [{
                src: ['fonts/**'],
                dest: 'dist/fonts/',
                filter: 'isFile',
                expand: true,
                flatten: true
            }, {
                src: ['bower_components/font-awesome/fonts/**'],
                dest: 'dist/css/',
                filter: 'isFile',
                expand: true,
                flatten: false
            }]
        }
    },
3

Включить шрифты Скопируйте все файлы шрифтов в каталог /fonts рядом с вашим CSS.

  • Включить CSS или LESS У вас есть два варианта включения шрифтов в вашем проекте: ванильный CSS или источник LESS. Для ванильного CSS просто включить скомпилированный файл CSS из /css в репозиторий.
  • Для LESS скопируйте файлы .less из /меньше в существующие Каталог Bootstrap. Затем импортируйте его в bootstrap.less через @import "Самозагрузка-glyphicons.less";. Перекомпилируйте, когда будете готовы.
  • Добавьте несколько значков! После того, как вы добавили шрифты и CSS, вы можете используя значки. Например, <span class="glyphicon glyphicon-ok"></span>

источник

  • 1
    Привет всем, я сделал то же самое и проследил за структурой, но не получил правильный глификон ... Вместо глификона отображается неопознанное изображение типа 0101
2

Загрузите все файлы из бутстрапа, а затем включите этот css

<style type="text/css">
        @font-face {
            font-family: 'Glyphicons Halflings';
            src: url('/fonts/glyphicons-halflings-regular.eot');
        }
 </style>
0

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

http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp

  • 0
    Обратите внимание, что ответы только на ссылки не приветствуются, поэтому ответы SO должны быть конечной точкой поиска решения (в отличие от еще одной остановки ссылок, которая, как правило, со временем устареет). Пожалуйста, рассмотрите возможность добавления отдельного краткого обзора здесь, сохраняя ссылку в качестве ссылки.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню