Бутстрап Глификон

Bootstrap css использует халфлингов из Glyphicons. Если бы я купил свою полную линейку продуктов, как бы включить ее в структуру бутстрапа?

Ответ 1

Вам нужно будет пересчитать фоновое позиционирование каждого значка глифа в свой собственный класс или перезаписать классы, уже установленные бутстрапом, чтобы работать с ними. Twitter bootstrap использует полусладкую (бесплатную) версию значков, которые являются 14px все вокруг, полный набор вдвое больше, поэтому старый background-position's не будет работать.

Вот пример того, как выглядит один из классов значков bootstraps:

/* class for the icon "fast-backward", notice the positioning values set in pixels */
.icon-fast-backward {
    background-position: -216px -72px;
}

/* main class, defining what icon sheet to use */
[class^="icon-"], [class*=" icon-"] {
    background-image: url("../img/glyphicons-halflings.png");
    background-position: 14px 14px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 14px;
    line-height: 14px;
    vertical-align: text-top;
    width: 14px;
}

Ответ 2

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

Ответ 3

Вы также можете использовать решение Font Awesome.

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

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

Ответ 4

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

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

Ответ 5

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

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

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

Фоновая позиция по умолчанию - 14px 14px, поэтому вам нужно reset to 0 0, как я это сделал выше.

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

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

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

Вы можете использовать base-css-class: .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
}

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

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

Теперь используйте полные "обычные" глификоны вместе с халфлингами:

<!-- 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.. }

Ответ 9

Вы могли бы использовать мой soluce. Поместите эту строку после загрузки URL-адреса url-ссылки на ваш заголовок.

<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 наслаждайтесь:)

Ответ 10

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

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

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

Ответ 11

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

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

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

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

Ответ 12

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

В zip файле glyphicons скопируйте все шрифты в /glyphicons/web/bootstrap _example/fonts, где ваши исходные шрифты находятся в вашем проекте
В zip файле glyphicons просмотрите /web/bootstrap _example/css/glyphicons.css, скопируйте и вставьте все в свой собственный файл less/css.
Этот шаг может быть лишним, если ваш собственный файл css/less перезаписывает их правильно: в файле проекта bootstrap.css удалите элементы @font-face, стили glyphicon и все теги индивидуального содержимого глификона (т.е..glyphicon-xxxx: before {content:...}).
В вашем файле less/css со всеми новыми тегами найдите и замените ".glyphicons-" заменить на .glyphicon - "

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

Ответ 13

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

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

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