прихлоп технологии glyphicons

использовать генератор спрайтов CSS загрузка zip-файл. Он создаст соответствующие классы CSS для вас (имена взяты из самих изображений), объединяя все изображения в один (прозрачный) PNG один.

вы также можете использовать Шрифт Удивительным решение.

масштабируемая векторная графика означает, что иконки выглядят замечательно в любом размере.

разработанный с нуля, чтобы быть полностью обратно совместим с Twitter Bootstrap 2.0.

Я также создал один на Github. Не видел Марко пост выше, пока после этого.

https://github.com/ekryski/bootstrap-template

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

лучшим способом было бы создать отдельный файл css и продолжить их ".значок - " соглашение об именах.

.icon-whatever {
   background:url('..img/someicon.png') 0 0; 
}

фоновая позиция по умолчанию 14px 14px Итак, вам нужно сбросить его в 0 0 Как я сделал выше.

Я создал спрайт и CSS drop-in для Bootstrap, чтобы обеспечить эту функциональность. РЕПО и инструкции находятся на Github. Не каждый значок имеет покрытие еще, и некоторые из них все еще немного не в центре. Чтобы использовать большие значки, просто добавьте icon-large CSS-класс:

<i class="icon-large icon-search"></i>

здесь есть отличная статья о значках Bootstrap:http://www.themplio.com/twitter-bootstrap-icons

нет необходимости включать его. Вы можете просто добавить glyphicons и использовать его вместе с полуросликами загрузчик входит.

добавить технологии glyphicons (обычный набор) следующим образом:

/css/glyphicons.css 
/fonts/glyphicons-regular.eot 
/fonts/glyphicons-regular.svg 
/fonts/glyphicons-regular.ttf 
/fonts/glyphicons-regular.woff 
/fonts/glyphicons-regular.woff2

вам целесообразно дать базовый css-класс:.glyphicons тот же стиль, что и bootstraps .glyphicon

.glyphicons {
    position:relative;
    top:2px; 
    display:inline-block;
    font-family:'Glyphicons Regular';
    font-style:normal;
    font-weight:normal;
    line-height:1;
    vertical-align:top;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}

далее добавить ссылку на технологии glyphicons на вашу страницу следующим образом:

<link href="/css/glyphicons.css" rel="stylesheet" />

теперь использовать полный "обычной" технологии glyphicons наряду с халфлинги:

<!-- halflings / bootstrap 3 -->
<span class="glyphicon glyphicon-glass"></span>

<!-- Glyphicons Regular set (note the plural suffix!) -->
<span class="glyphicons glyphicons-glass"></span>

другие ответы прекрасны, но имейте в виду разницу между значками с техникой шрифта и более старой техникой при использовании sprite-png. Png не всегда масштабируются и поэтому поставляется с несколькими размерами. Кроме того, цвет не может быть установлен. Для контраста с фоном,.white класс может быть использован на png для переключения с черного на белый. С помощью шрифтов, стиль иконки, как вы бы стиль шрифта:

.iconstyle {  color: blue;  font-size: 26px;  etc.. }

вы могли бы использовать мой soluce. Поместите эту строку после bootstrap link url css в свой заголовок.

<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/opa-icons.css" rel="stylesheet">

затем вызвать онлайн html код

<i class="icon-close icon-red"></i>&nbsp;Someting <!-- 16x16pix size color red -->
<i class="icon32 icon-close icon-blue"></i>&nbsp;Someting <!-- 32x32pix size color red -->

вы можете скачать здесь активы (изображения-иконки png и css как в zip):

http://www.photonautes-associes.fr/utils/assets.zip наслаждайтесь :)

загрузите шрифты с официальной страницы bootstrap, а затем вставьте этот код, как в вашем CSS-файле

попробуйте этот код

@font-face{
font-family: 'Glyphicons Halflings';
src: url('/fonts/glyphicons-halflings-regular.eot');}

Я думал, что добавлю свой опыт в список здесь.

было несколько препятствий для меня, когда я пытался добавить все Глифики к моей существующей, лабиринтной, пронизанной загрузкой кодовой базе. (Среди них, технологии glyphicons все использует в строительстве ".технологии glyphicons .glyphicons - [name] "и Bootstrap использует конструкцию".glyphicon .glyphicon-[имя]").

в конечном итоге я решил просто использовать их обоих, параллельно. Идя вперед, я нахожу, что я использую технологии glyphicons все строительные все больше и больше, но конструкция Bootstrap все еще работает для всего моего существующего кода.

Да, включая оба "шрифта" добавляет к общему весу страницы, но не катастрофически.

то, что я сделал, было довольно просто и отлично работало. Примечание: Если вы хотите, чтобы эти красивые технологии glyphicons работает как шрифты, так как Bootstrap версии я использую совсем.

1. в технологии glyphicons молнии, скопировать все шрифты в /технологии glyphicons/веб/bootstrap_example/шрифты, где в данный момент шрифты бутстрапа в проекте

2. в технологии glyphicons молнии, загляните в файл /веб/bootstrap_example/УСБ/технологии glyphicons.css, скопируйте и вставьте все в свой собственный меньше / css файл.

3. этот шаг может быть ненужным, пока ваш собственный файл css / less перезаписывает их правильно: в начальной загрузке вашего проекта.css файл, удалить @font-face вещи,.стили глификона и все отдельные теги содержимого глификона (т. е.glyphicon-xxxx: before { content:... }).

4. в вашем файле less / css со всеми новыми тегами найдите и замените ".технологии glyphicons-" заменить ".glyphicon-"

Что так и должно быть, если я не забыл что-то простое. Отлично работает для меня.

использовать glyphicons classess, например:

`<span class="glyphicon glyphicon-search" aria-hidden="true"></span>`

мои любимые шрифты значок Fontello, вы можете скачать иконки вам нужно вместо всего пакета.