Як користуватися гліфіконами в 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 безпосередньо, не перетворюючи його на css ... oops

— Shivang Gupta

Для версії 3.0.0 він ламається за замовчуванням. Спробував кілька solutions, у мене ніхто не працює.

— Andrew_1510

Я бачу цю проблему, використовуючи файл .less безпосередньо з використанням less.js. Звичайно, у такій ситуації я також хотів би бачити, як це спрацьовує

— Марк

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? Ви бачите помилки на консолі браузера?

— Зім

Просто переконайтеся, що ви правильно включили glyphicons.css. Це повинно працювати нормально: bootply.com/61521

— Зім

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

— Shivang Gupta

17

Здається, окреме посилання на файл css порушено.

— Треві Авотер,

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 р.). Дякую, що поділились!

— Девнер

6

Якщо ви використовуєте менше, і це не завантажує шрифт значків, ви повинні перевірити шлях шрифту, перейти до файлу variable.less і змінити шлях @ icon-font- path, який працював у мене.

— алехандро
джерело

4

Для Bootstrap 3 потрібен тег span, а не i

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

— stranger4js
джерело

3

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

Включіть CSS або LESS У вас є два варіанти ввімкнення шрифтів у вашому проекті: ванільний CSS або вихідний LESS. Для ванільного 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

Завантажте всі файли з bootstrap, а потім включіть цей css

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

— Користувач_3535
джерело

0

Це може допомогти. Він містить багато прикладів, які будуть корисні для розуміння.

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

— Мушу
джерело

Зауважте, що відповіді лише на посилання не рекомендуються, відповіді SO повинні бути кінцевою точкою пошуку рішення (проти чергової зупинки посилань, які з часом старіють). Будь ласка, додайте сюди окремий конспект, зберігаючи посилання як посилання.

— kleopatra