Bootstrap значок шрифта (Glyphicons)

Эта глава описывает значок шрифта (Glyphicons), а также некоторые примеры, чтобы понять его использование. Bootstrap форматы шрифтов в комплекте с более чем 200 символов. Во-первых, давайте сначала понять, что значок шрифта.

Что такое значок шрифта?

значок Шрифты является символом шрифта, используемый в веб-проекте. Хотя, Glyphicons полурослики нужна коммерческая лицензия, но вы можете на основе проекта Bootstrap для свободного использования этих значков.

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

Получить иконку Шрифты

У нас есть в среде установлены главы Загрузите 3.x версию Bootstrap, и понять его структуру каталогов. Вшрифтовиконки папок можно найти шрифт , который содержит эти файлы следующие:

• glyphicons-полурослики-regular.eot
• glyphicons-полурослики-regular.svg
• glyphicons-полурослики-regular.ttf
• glyphicons-полурослики-regular.woff

Связанные правила CSS , написанные в папкуDistCssbootstrap.cssпапки ибутстраповского-min.cssв файле.

Шрифты список иконок

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

CSS толкование правил

Следующее правило CSS составляет glyphicon класс.

@ Font-грани {
  семейство шрифтов: 'Glyphicons Халфлинги';
  SRC: URL ( '../ шрифты / glyphicons-полурослики-regular.eot');
  SRC: URL формата ( '../ шрифтов / glyphicons-полурослики-regular.eot #iefix?) формат ( «вложенная-OpenType'), URL ( '../ шрифты / glyphicons-полурослики-regular.woff') ( 'Уофф'), URL ( '../ шрифты / glyphicons-полурослики-regular.ttf') формат ( 'TrueType'), URL ( '../ шрифты / glyphicons-полурослики-regular.svg # glyphicons_halflingsregular') формат ( "SVG");
}

.glyphicon {
  позиция: относительная;
  верх: 1px;
  Дисплей: встроенный блок;
  семейство шрифтов: 'Glyphicons Халфлинги';
  -webkit-шрифт-разглаживание: сглаженный;
  стиль шрифта: нормальный;
  начертание шрифта: нормальный;
  высота линии: 1;
  -moz-OSX-шрифт-разглаживание: черно-белый;
}

Так правило шрифта лицо на самом деле место, чтобы найти glyphicons декларации семейство шрифтов и расположение.

Класс .glyphicon объявить относительное смещение позиции от вершины 1px, показан как встроенный блок, утверждение шрифтов, положений стиль шрифта и шрифта вес в норме, установите высоту строки 1. Кроме того, использование -webkit-шрифта сглаживании: сглаженной и -moz-OSX-шрифт-разглаживание: оттенки серого, получить консистенцию кросс-браузерный.

Тогда, где

.glyphicon: пусто {
  ширина: 1em;
}

Пустой glyphicon.

Есть 200 класса, каждый класс для значка. Это общий класс формат выглядит следующим образом:

.glyphicon-ключевое слово: перед тем {
  Содержание: "hexvalue";
}

Например, иконки пользователей, чтобы использовать, это класс следующим образом:

.glyphicon-пользователь: перед тем {
  Содержание: "\ E008";
}

использование

Чтобы использовать значок, просто используйте следующий код. Пожалуйста, сохраняйте соответствующее пространство между иконками и текстом.

<Span класс = "glyphicon glyphicon-поиск"> </ SPAN>

В следующем примере показано, как использовать значок Шрифты:

Результаты следующие:

Шрифт значок с панели навигации

Значок Пользовательские шрифты

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

Мы начнем в приведенном выше примере, изменив размер шрифта, цвет, и применить тень текста, чтобы быть настроены значок.

Здесь начинается код:

<Кнопка тип = "кнопка" класс = "БТН БТН-первичной БТН-ДЖИ">
  <Span класс = "glyphicon glyphicon-пользователь"> </ SPAN> Пользователь
</ Button>

Эффект выглядит следующим образом:

Пользовательские Размер шрифта

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

<Кнопка тип = класс "Кнопка" = "БТН БТН-первичной БТН-ДЖИ" стиль = "Размер шрифта: 60px">
  <Span класс = "glyphicon glyphicon-пользователь"> </ SPAN> Пользователь
</ Button>

цвет пользовательских шрифтов

<Кнопка тип = "кнопка" класс = "БТН БТН-первичной БТН-ДЖИ" стиль = "цвет: RGB (212, 106, 64);">
  <Span класс = "glyphicon glyphicon-пользователь"> </ SPAN> Пользователь
</ Button>

Применить тень текста

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User
</button>

Интернет пользовательский значок шрифта

настроить значок шрифта Нажмите здесь >>

список Иконка