Bootstrap 3 Glyphicons не працює

Я завантажив bootstrap 3.0 і не можу змусити гліфікони працювати. Я отримую якусь помилку "E003". Будь-які ідеї, чому це відбувається? Я пробував як локально, так і в Інтернеті, і в мене все ще виникає однакова проблема.

У мене виникло те саме питання, і я не міг знайти будь-яку інформацію про нього, крім прихованих коментарів на цій сторінці. Мої файли шрифтів завантажувались нормально відповідно до Chrome, але піктограми не відображалися належним чином. Я роблю це на відповідь, тому, сподіваюся, допоможе іншим.

Щось не так було з файлами шрифтів, які я завантажив із інструмента налаштування Bootstrap 3. Щоб отримати правильні шрифти, перейдіть на головну сторінку Bootstrap та завантажте повний .zip файл. Витягніть звідти чотири файли шрифтів у свій каталог шрифтів, і все повинно працювати.

Зауважте читачам: не забудьте прочитати коментар @ user2261073 та відповідь @ Jeff щодо помилки у налаштуваннях. Це, ймовірно, причина вашої проблеми.

Файл шрифту не завантажується правильно. Перевірте, чи файли в їх очікуваному місці.

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Як вказує Даніель, це також може бути проблемою міметипу. Інструменти розробки Chrome показують завантажені шрифти на вкладці мережі:

У моєму випадку я отримував 404 для гліфіконів-халфлінг-regular.woff і не видимих ​​гліфіконів у мобільних браузерах.

Схоже, існує деяка плутанина щодо типу MIME для woff, що більше одного типу MIME приймаються різними браузерами, але W3C говорить :

application/font-woff

Редагувати: Після тестування наступного типу MIME для роботи woff у всіх браузерах на даний момент:

application/x-font-woff

Редагувати: Остання версія Bootstrap на даний момент (3.3.5) використовує шрифти .woff2 з тим же початковим результатом, що і .woff, W3C все ще визначає специфікацію, але на даний момент тип MIME, здається, є:

application/font-woff2

-Якщо ви дотримувались найбільш високо оціненої відповіді, вона все ще не працює :

FontПапки повинні бути на тому ж рівні, що і папку CSS. Виправити шлях у bootstrap.css не вийде .

Bootstrap.cssмає перейти до Fontsпапки саме так:

@font-face {
    font-family: 'Glyphicons Halflings';

    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Якщо інші рішення не працюють, ви можете спробувати імпортувати Glyphicons із зовнішнього джерела, а не покладатися на Bootstrap, щоб зробити все за вас. Зробити це:

Ви можете це зробити в HTML:

<link href="https://stackoverflow.com//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Або CSS:

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css")

Заслуга edsiofi з цієї теми: Bootstrap 3 Glyphicons CDN

У випадку, якщо хтось інший опинився тут і використовує Bootstrap> = v4.0: підтримка гліфікону відпадає

Відповідна частина відмітки про випуск:

Випав шрифт значка Glyphicons. Якщо вам потрібні значки, деякі варіанти:

верхня версія потоку гліфіконів

Октикони

Шрифт Awesome

Джерело: https://v4-alpha.getbootstrap.com/migration/#components

Якщо ви хочете використовувати гліфікони, потрібно завантажити їх окремо.

Я особисто спробував Font Awesome, і це досить добре. Додавання піктограм схоже на гліпікон:

<i class="fas fa-chess"></i>

Я переглядав це старе моє запитання, і оскільки те, що досі повинно було бути правильною відповіддю, було дане мною в коментарях, я думаю, що я також заслуговую на це заслуги.

Проблема полягала в тому, що файли шрифтів gliphicon, завантажені з інструмента налаштування bootstrap, не збігалися з тими, які завантажуються з перенаправлення, знайденого на домашній сторінці bootstrap. Ті, які працюють як слід, - це ті, які можна завантажити за наступним посиланням:

http://getbootstrap.com/getting-started/#download

Кожен, хто має проблеми зі старими файлами поганого настроювача, повинен перезаписати шрифти за посиланням вище.

На веб-сайтах Azure відсутня конфігурація MIME woff . Ви повинні додати наступний запис у web.config

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        </staticContent>
    </system.webServer>
</configuration> 

Як описано @Stijn, місце встановлення за замовчуванням у Bootstrap.cssнеправильне під час встановлення цього пакета з Nuget.

Змініть цей розділ, щоб виглядати так:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('Content/fonts/glyphicons-halflings-regular.eot');
  src: url('Content/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded- opentype'), url('Content/fonts/glyphicons-halflings-regular.woff') format('woff'), url('Content/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('Content/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Ви можете додати цей рядок коду і готово.

<link href="https://stackoverflow.com//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Дякую.

IIS не буде серверними .woffфайлами за замовчуванням, тому в IIS вам потрібно буде додати <mimeMap>запис до свого web.configфайлу;

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
        </staticContent>
    </system.webServer>
</configuration>

Чи є у вашому каталозі шрифтів усі файли нижче

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

Я змінив мій файл з менш змінними. Без змін

@icon-font-path:          "fonts/";    

оригінал був

@icon-font-path:          "../fonts/"; 

Це спричиняло проблеми

Це пов’язано з неправильним кодуванням у bootstrap.css та bootstrap.min.css. Коли ви завантажуєте Bootstrap 3.0 з програми "Customizer", такий код відсутній:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Оскільки це основний код використання Glyphicons, він не буде працювати ofc ...

Завантажте css-файли з повного пакету, і цей код буде реалізований.

Це було причиною, чому значки не з’являлися для мене:

* {
    arial, sans-serif !important;
}

Після того, як я видалив цю частину своєї CSS, все працювало як слід. Важливим був той, хто спричинив неприємності.

Інша проблема / рішення може мати такий код Bootstrap 2.x:

<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>

і під час міграції на основі керівництва ( .icon-* ---> .glyphicon .glyphicon-*):

<button class="btn btn-default" ng-click="open()"><i class="glyphicon-calendar"></i></button>

ви забудете додати клас значка (що містить посилання на шрифт):

<button class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>

Нижче наведено те, що мене виправило. Я отримував "поганий URI" помилку, використовуючи в консолі Firebug. Значки відображалися у вигляді E ### чисел. Мені довелося додати .htaccess файл у мою каталог 'шрифтів'. <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> Можливий дублікат: Завантажуваний шрифт на firefox: неправильний URI або міжсайтовий доступ заборонено

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

Якщо ви збираєте Twitter Bootstrap з SASS, використовуючи gulp-sassабо grunt-sassтобто. node-sass. Переконайтеся, що ваші модулі вузлів оновлені, особливо якщо ви працюєте над досить старим проектом.

Виявляється, що за станом на деякий час назад директива SASS @at-rootвикористовується у визначенні @font-faceв glyphicons см https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/bootstrap/_glyphicons.scss .

Гетча тут - це node-sassтобто. libsassне підтримуйте @at-rootдирективу, якщо вона занадто стара. У такому випадку ви отримаєте @font-faceзагорнуте зображення, у @at-rootякому браузер не має поняття, що робити. Результатом цього є те, що жоден шрифт не завантажуватиметься, і ви, швидше за все, побачите сміття замість значків.

Примітка: нижче, швидше за все, є нішевий сценарій, але я хотів поділитися ним у випадку, якщо хтось інший може вважати його корисним.

У проекті рейок ми досить багато разів використовуємо дорогоцінний камінь, який використовує двигун Rails bootstrap-sass. У головному проекті все було добре, за винятком роздільної здатності шрифту гліфікону.

GET http://0.0.0.0:3000/fonts/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found) 

Ми виявили, що це $bootstrap-sass-asset-helperбуло falseпід час резолюції, коли ми очікували, що це буде правдою, тому шлях був іншим.

Ми змусили $bootstrap-sass-asset-helperініціалізуватися в самоцвіті двигуна, зробивши:

// explicit sprockets import to get glyphicon font paths correct
@import 'bootstrap-sprockets';
@import "bootstrap/variables";

наприклад, це призвело до вирішення шляху до:

/assets/bootstrap/glyphicons-halflings-regular.woff

Знову ж таки, це не повинно бути необхідним у будь-якому звичайному проекті рейок bootstrap-sass, ми просто випадково використовуємо багато поглядів, і це спрацювало для нас. Сподіваємось, це може допомогти комусь іншому.

Ось що говорить офіційна документація щодо шрифтів, які не відображаються.

Зміна місця розташування шрифту значка Bootstrap передбачає, що файли шрифтів значків будуть розміщені у каталозі ../fonts/, відносно зібраних файлів CSS. Переміщення або перейменування цих файлів шрифтів означає оновлення CSS одним із трьох способів: Змінення змінних @ icon-font-path та / або @ icon-font-name у вихідному файлі Менше файлів. Використовуйте варіант відносних URL-адрес, наданий компілятором Менше. Змініть шляхи url () у складеному CSS. Використовуйте будь-який варіант, який найкраще відповідає вашим конкретним налаштуванням розробки.

Крім цього, можливо, ви пропустили скопіювати папку шрифтів у кореневий каталог

У мене була ця проблема, і вона була викликана файлом variables.less. Переосмислення його для встановлення значення значка-шрифту-значка вирішило проблему.

Структурований файл виглядає приблизно так:

\Content
        \Bootstrap
        \Fonts
 styles.less
 variables.less

Додавання мого власного файла variables.less у корені вмісту та посилання на це у styles.less вирішили помилку 404.

Variables.less містить:

@icon-font-path:          "fonts/";

Я отримав Bootstrap від NuGet. Коли я опублікував свій сайт, гліфи не спрацювали.

У моєму випадку я працював, встановивши Дію збірки для кожного з файлів шрифтів на "Вміст" і встановивши їх на "Копіювати завжди".

У мене був код ширини коробки \ e094 для glyphicon-стрілка вниз, насправді я вирішив проблему, додавши glyphicon у клас css так:

<i class="glyphicon  glyphicon-arrow-down"></i>

якщо це могло б допомогти комусь ...

Переконайтеся, що, наприклад, не надто вказати сімейство шрифтів

*{font-family: Verdana;}

видалить шрифт шаблонів з елементів i.

У мене була така ж проблема, коли браузер не зміг знайти файли шрифтів, і моя проблема була пов'язана з виключеннями в моєму файлі .htaccess, який містив білі списки файлів, які не слід надсилати на index.phpобробку. Оскільки файл шрифту не вдалося завантажити, символи були замінені на BLOB.

RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]

Як бачите, такі файли, як зображення, rss та xml, виключаються із перезапису, але файли шрифтів є .woffта .woff2файли, тому їх також потрібно додати до білого списку.

RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json|woff|woff2)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]

Додавання woffі woff2в білий список дозволяє файли шрифтів , які будуть завантажені, і glyphicons повинні потім відображатися правильно.

Ви повинні встановити це замовлення:

<link rel="stylesheet" href="path/bootstrap.min.css"> 
<style type="text/css"> 
     @font-face {   font-family: 'Glyphicons Halflings';   
     src: url('../fonts/glyphicons-halflings-regular.eot');   
     src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/glyphicons-halflings-regular.woff') format('woff'),  
     url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
     url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); } 
</style>

Те, що для мене працювало, було заміною маршрутів із:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

до

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('/assets/glyphicons-halflings-regular.eot');
  src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
  url('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'),
  url('/assets/glyphicons-halflings-regular.ttf') format('truetype'),
  url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Ось так ви включаєте піктограму в завантажувальний 3

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

http://glyphicons.bootstrapcheatsheets.com/

Сподіваюся, що це допомагає.

@font-face {
     font-family: 'Glyphicons Halflings';
      src: url('../fonts/glyphicons-halflings-regular.eot');
      src: url('../fonts/glyphicons-halflings-regular.eot?#iefix')         format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');}

Я використовую завантажувальний простір з простором імен та гліфіконами, які не працюють, але після додавання вищезазначеного рядка в код гліфікони працюють нормально.

Я просто перейменував шрифт з bootstrap.css за допомогою Ctrl + c, Ctrl + v і він працював.