Бутстрап 3 глификона CDN

ОПЛАТА ВНИМАНИЕ!

Значки Bootstrap вернутся после этот слияние слияния.

После этого в течение последних двух недель я решил восстановить шрифт значка Glyphicons для основного репо. Учитывая, насколько распространены значки в пользовательских интерфейсах, это, вероятно, вред большинству людей, чтобы не включать их (или какой-либо другой шрифт значка) в то же место, что и CSS и JS.

С этим обновлением появляется следующее:

Восстанавливает документацию (на странице "Компоненты" )

Новые переменные @icon-font-path и @icon-font-name, для гибкости при добавлении и удалении шрифтов значков

Обновление до последних Glyphicons (добавление 40 новых значков)

Удаляет упоминание старых Glyphicons с страницы CSS
Мы будем работать над улучшением настройки шрифтов значков в будущем, поэтому обмен файлами шрифтов может быть проще (что было всей мотивацией для первоначального удаления).

Каков URL-адрес CDN новой версии Twitter-бутстрапа Glyphicons?

Из Bootstrap 3 они были перемещены в отдельный репозиторий, но я не нашел никакого CDN.

Из официальной документации:

С запуском Bootstrap 3 значки были перемещены в отдельный репозиторий. Это делает основной проект максимально возможной, облегчает обмен файлами библиотек значков и делает шрифты значков Glyphicons более доступными для большего количества людей вне Bootstrap.

На официальном сайте они не предоставляют URL-адрес CDN для значков.

Где это можно найти? Я не хочу загружать репозиторий и включать его в свой проект.

Ответ 1

С недавним выпуском bootstrap 3, и глификоны объединяются обратно в основное репозиторинг Bootstrap, Bootstrap CDN теперь служит полный Bootstrap 3.0 css, включая Glyphicons. Ссылка на загрузку Css - это все, что вам нужно включить: Глификоны и их зависимости находятся на относительных путях на сайте CDN и указаны в bootstrap.min.css.

В html:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

В css:

 @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");

Ниже приведена рабочая версия .

Примечание, что вы должны использовать классы .glyphicon вместо .icon:

Пример:

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

Также обратите внимание на, что вам нужно будет включить bootstrap.min.js для использования компонентов Bootstrap JavaScript, см. Bootstrap CDN для URL.

Если вы хотите использовать Glyphicons отдельно, вы можете сделать это, напрямую ссылаясь на Glyphicons css на Bootstrap CDN.

В html:

<link href="//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");

Так как файл css уже содержит все необходимые зависимости Glyphicons (которые находятся в относительном пути на сайте CDN Bootstrap), добавление файла css - все, что нужно сделать, чтобы начать использовать глификоны.

Вот работая demo из глификонов без Bootstrap.

Ответ 2

Альтернативой было бы использовать Font-Awesome для значков:

Включая шрифт-Awesome

Откройте Font-Awesome на CDNJS и скопируйте URL-адрес CSS последней версии:

<link rel="stylesheet" href="<url>">

Или в CSS

@import url("<url>");

Например (обратите внимание, что версия изменится):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

Использование:

<i class="fa fa-bed"></i>

Он содержит много значков!

Ответ 3

Хотя Bootstrap CDN восстановил глификоны до bootstrap.min.css, Bootstrap CDN Bootswatch css файлы не содержат глификонов.

Например, тема Amelia: http://bootswatch.com/amelia/

По умолчанию у Amelia есть глификоны в этом файле: http://bootswatch.com/amelia/bootstrap.min.css

Но файл bootstrap CDN css не содержит глификонов: http://netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/bootstrap.min.css

Итак, как упоминалось в @edioufi, вы должны включить, что вы должны включать glphicons css, если вы используете файлы Bootswatch из загрузочного CDN. Файл: http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css