Как использовать глификоны в bootstrap 3.0

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

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

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

or

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

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

Ну вот:

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

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

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

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

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

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

Пример до:

\css
\js
index.html

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

\css
\fonts
\js
index.html

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

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

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

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

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

источник

Если вы используете 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
            }]
        }
    },

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

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

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

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