it-swarm.com.ru

Bootstrap 3 Глификонов CDN

ОБРАЩАТЬ ВНИМАНИЕ!

Значки Bootstrap возвращаются после слияния этого запроса извлечения .


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

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

  • Восстанавливает документацию (на странице Компоненты)
  • Новые переменные @icon-font-path и @icon-font-name для гибкости при добавлении и удалении значков шрифтов
  • Обновление до последних Glyphicons (добавление 40 новых иконок)
  • Удаляет упоминание о старых глификонах со страницы CSS

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


Каков URL CDN новой версии Twitter Bootstrap Glyphicons?

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

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

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

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

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

79
Ionică Bizău

С недавним выпуском bootstrap и глификонами, сливаемыми обратно в основное Bootstrap репо, Bootstrap CDN теперь обслуживающий полный Bootstrap 3.0 css, включая Глификоны . Справочник Bootstrap 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 отдельно , вы можете сделать это, напрямую ссылаясь на css Glyphicons на 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 - это все, что нужно сделать, чтобы начать использовать Glyphicons.

Вот рабочая демонстрация Глификонов без Bootstrap.

135
edsioufi

В качестве альтернативы можно использовать Font-Awesome для значков:

Включая Font-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>

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

27
Ionică Bizău

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

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

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

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

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

2
trante