Я уже использовал глификоны в bootstrap 2.3, но теперь я обновился до bootstrap 3.0. Теперь я не могу использовать свойство icon.
В bootstrap 2.3 работает тег ниже
<i class="icon-search"></i>
В bootstrap 3.0 это не работает.
html
css
twitter-bootstrap-3
Шиванг Гупта
источник
источник
solutions
, у меня никто не работает.Ответы:
Значки (glyphicons) теперь содержатся в отдельном файле CSS .. .
Разметка изменилась на:
<i class="glyphicon glyphicon-search"></i>
или
<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, вы должны:
fonts
в каталог начальной загрузки. Сложите вместе с другими папками «css, js».Пример до:
\css \js index.html
Пример после загрузки:
\css \fonts \js index.html
источник
Если вы используете меньше, и он не загружает шрифт значков, вы должны проверить путь к шрифту, перейти к файлу variable.less и изменить путь @ icon-font- path, который сработал для меня.
источник
Bootstrap 3 требует тега span, а не i
<span class="glyphicon glyphicon-search"></span>`
источник
Включите шрифты. Скопируйте все файлы шрифтов в каталог / fonts рядом с вашим 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
источник