Bootstrap 3 Glyphicons CDN

76

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

Значки 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 для значков.

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

Теги:
twitter-bootstrap-3
cdn

3 ответа

127
Лучший ответ

С недавним выпуском 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.

Поделиться
  • 0
    Хм, интересно. Кажется, правильный ответ, но значки не появляются при переключении на этот URL. Прекрасно работает шрифт. Загружен файл CSS с правилами для иконок. Нужно ли что-нибудь еще? Изображений?
  • 0
    Работает для меня. DEMO
Показать ещё 8 комментариев
26

Альтернативой было бы использовать 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>

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

Поделиться
  • 0
    После нескольких часов попыток заставить работать иконки, ссылка на шрифт cdn-awesome решила мою проблему. Благодарю.
  • 0
    @Eenvincible Не забудьте использовать последнюю версию . Ссылки из моего ответа немного устарели.
Показать ещё 6 комментариев
2

Хотя 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

Поделиться
  • 0
    Также настройщик при начальной загрузке иногда генерирует неверные файлы шрифтов. Отдельная загрузка файлов шрифтов помогла мне вернуть мои иконки. Это ошибка пакета начальной загрузки иногда.
  • 0
    Trante: ваша информация неверна. Если вы проверите свои ссылки, то обнаружите, что CDN Bootstrap для темы (тем) начальной загрузки содержит глифы.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню