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

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

В начальной загрузки 2.3, ниже тег работает

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

В начальной загрузки 3,0, это не работает.

источник

2013-08-13 Shivang Gupta

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

Спасибо, на самом деле проблема заключалась в том, что я использовал безмерный файл напрямую, не преобразовывая его в css ... oops –

Для версии 3.0.0 он ** прерывает ** по умолчанию. Пробовал несколько «решений», никто не работает для меня. –

107

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

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

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

или

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

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

источник

2013-08-13 09:47:20 ZimSystem

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

Can вы показываете свой код, который включает в себя загрузочный и глификонский CSS? Вы видите какие-либо ошибки в консоли браузера? – ZimSystem

не отображается ошибка ... my skype id is sanghi.shivang –

Там вы идете:

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

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

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

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

источник

2013-08-13 09:48:09 Michael

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

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

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

source

источник

2013-08-13 09:50:02

Если Yout скачать настроенную самозагрузку 3 дистрибутив вы должны:

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

Пример До:

\css 
\js 
index.html

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

\css 
\fonts 
\js 
index.html

источник

2013-09-10 19:14:42

Это отлично работает (январь 2016 г.). Спасибо, что поделился! – Devner

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

источник

2013-10-06 21:34:04 alejandro

Bootstrap 3 требует поверочного тег не я

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

источник

2014-12-16 07:36:04 stranger4js

Если вы используете хрюкать для сборки приложений, вполне возможно, что во время создания пути меняются. В этом случае вам необходимо изменить файл 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 
      }] 
     } 
    },

источник

2015-03-19 09:26:55

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

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

источник

2015-09-21 05:26:26 Mushu

Обратите внимание, что [ссылки только ответов] (http://meta.stackoverflow.com/tags/link-only-answers/info) обескуражены, SO ответы должны быть конечной точкой поиска решения (vs.еще одна остановка ссылок, которые со временем становятся устаревшими). Пожалуйста, подумайте о добавлении отдельного резюме здесь, сохранив ссылку в качестве ссылки. – kleopatra

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

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

источник

2015-09-21 07:50:15

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

ответ

Смежные вопросы