Добавить все глификоны в Bootstrap 3

Ответ 1

Вы можете создать свой собственный шрифт, используя бесплатный сервис: http://fontello.com/

Просто перетащите свой glyphicons-halflings-regular.svg файл, выберите значки, которые вы хотите использовать, и загрузите собственный шрифт, содержащий только то, что вам нужно.

Fontello поставляется с предустановленными библиотеками:

• Fontelico
• Шрифт Awesome
• Entypo
• Typicons
• Iconic
• Современные пиктограммы
• Meteocons
• Лаборатории MFG
• Maki
• Zocial
• Brandico
• Неуловимый
• Linecons
• Веб-символы

Вы также можете купить полную версию Glyphicons за $59 в http://glyphicons.com/

Ответ 2

Я хотел использовать Glyphicons Pro, который я купил, но расширение нынешних халфлингов внутри бутстрапа было грязным. Поэтому я создал отдельный файл css для каждого набора значков (full, filetypes и social) и скопировал способ инициализации bootstrap, чтобы я мог использовать аналогичный синтаксис. то есть.

<span class="glyphpro glyphpro-download"></span>
<span class="glyphfiles glyphfiles-xml"></span>
<span class="glyphsocial glyphsocial-github"></span>

Таким образом вы можете загружать только те, которые хотите, и когда захотите, и вы можете использовать конфигурацию бутстрапа ванили. Найти мои файлы здесь: Gist @GitHub

Ответ 3

Я купил полные Gylphicons, установленные из http://glyphicons.com/ и хотел использовать все доступные значки. Если вы используете меньше, возможно, вам придется сделать что-то другое, я не знаю.

То, что я сделал и работал у меня после того, как попробовал разные вещи, размещенные в этом потоке, а другие в сети stackexchange:

(1) Создал резервную копию моего исходного файла bootstrap.css(я модифицировал мой, плюс хорошая идея)

(2) Скопировал все обычные файлы шрифтов с помощью glyphicons из каталога /web/html _css/fonts в каталог шрифтов, где находятся мои файлы шрифтов начальной загрузки

(3) Начиная с строки 263ish файла bootstrap.css сделайте изменение таким, как показано ниже: (ваш может быть немного другим)

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

Они должны указывать на новые файлы шрифтов.

(4) Если вы хотите, чтобы все глифы, как я, открыли файл в каталоге /web/html _css/css/, помеченном как glyphicons.css, и скопировали все css для глихиконов, за исключением части с @font- face {} и .glyphicon {} и вставить в пустой текстовый документ.

(5) Вам нужно будет выполнить поиск и заменить (я все равно) на .glyphicons, ум в конце и заменить на .glyphicon no (s) на конце

(6) Затем откройте файл bootstrap.css и закомментируйте или удалите все остальные .glyphicon-styles styles и вставьте в свои новые стили.

(7) Вам может потребоваться удалить строку с самого нижнего края файла, которая указывает на файл bootstrap.css.map. Мне не нужно было, но вам может понадобиться.

(8) Счастливый Глиф!

ПРИМЕЧАНИЕ. Теперь вы должны настроить все глифы. Просто имейте в виду, что некоторые имена глификонов различаются, чем в исходном файле начальной загрузки.

Я создал репозиторий для модифицированного файла css: https://github.com/snowballrandom/bootstrap

Ответ 4

Было бы проще просто создать собственный .png и использовать css обычно.