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

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

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

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

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

Ответы

Ответ 1

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

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

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

или

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

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

Ответ 2

Там вы идете:

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

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

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

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

Ответ 3

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

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

Пример до:

\css
\js
index.html

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

\css
\fonts
\js
index.html

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

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

источник

Ответ 7

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

Ответ 8

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

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