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

86

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

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

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

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

html css twitter-bootstrap-3

— Шиванг Гупта
источник

1

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

— Шиванг Гупта

Спасибо, на самом деле проблема заключалась в том, что я использовал файл

— .less

Для версии 3.0.0 он не работает по умолчанию. Пробовал несколько solutions, у меня никто не работает.

— Andrew_1510

Я вижу эту проблему, используя файл .less напрямую, используя less.js. Конечно, в этой ситуации я бы тоже хотел, чтобы это сработало

— Marc

108

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

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

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

или

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

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

— Зим
источник

5

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

— Шиванг Гупта

Можете ли вы показать свой код, включающий начальную загрузку и глификоны CSS? Вы видите какие-либо ошибки в консоли браузера?

— Zim

Просто убедитесь, что вы правильно включаете glyphicons.css. Он должен работать нормально: bootply.com/61521

— Зим

Я добавил это правильно ... структура - css / fonts / ...., css / less / ..., css / bootstrap.min.css, а в bootstrap.min.css я включил @import "less / bootstrap-glyphicons.less ";

— Шиванг Гупта

17

Отдельная ссылка на файл css кажется неработающей.

— Trevi Awater

29

Вот и все:

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

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

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

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

— TheNiceGuy
источник

1

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

— Фернандо Кош

19

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

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

Пример до:

\css
\js
index.html

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

\css
\fonts
\js
index.html

— Эмилиано Диас
источник

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

— Devner

6

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

— Алехандро
источник

4

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

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

— stranger4js
источник

3

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

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

источник

— Марк Энтони Ю
источник

1

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

— Шиванг Гупта

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
            }]
        }
    },

— Анке Венц
источник

2

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

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

— User_3535
источник

0

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

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

— Мушу
источник

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

— kleopatra