Цель
Иконки шрифтов становятся все более популярными благодаря ряду преимуществ. В этом руководстве мы обсудим, как использовать и настраивать Glyphicons с помощью Twitter Bootstrap 3. Мы также объясним, как работают правила CSS, что даст вам лучшее представление о том, как работают шрифты значков в целом. Таким образом, вы научитесь работать с любым набором значков шрифтов, кроме Glyphicons.
Что такое Glyphicons
Глификоны — это шрифты для значков, которые вы можете использовать в своих веб-проектах. Хотя вам нужна коммерческая лицензия для использования Glyphicons, но вы можете использовать их с проектами на основе Twitter Bootstrap бесплатно. Единственное, что рекомендуется предоставить обратную ссылку на веб-сайт Glyphicon.
Получение глификонов
Если вы загрузили Bootstrap 3 с https://github.com/twbs/bootstrap/releases/download/v3.0.2/bootstrap-3.0.2-dist.zip (или любой предыдущей версии 3x), вы можете найти глификоны в папке шрифтов внутри папку dist. Всего существует четыре файла: glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf и glyphicons-halflings-regular.woff. Связанные правила CSS присутствуют в файлах bootstrap.css и bootstrap-min.css в папке css папки dist.
Как использовать
В общем, мы можем вывести, что общий синтаксис для использования Glyphicon с Bootstrap 3 следующий
Где * — любое из множества ключевых слов, каждое из которых представляет определенный значок. В следующем примере показано, как использовать его с кнопкой.
Вы можете просмотреть живую демонстрацию примера здесь
Глификон с навигационной панелью
Использование глификонов с навигационной панелью body {padding-top: 50px; отступ слева: 50 пикселей; } Демонстрация
Объяснение правил CSS, лежащих в основе
Следование правилам CSS составляет класс glyphicon
@ font-face {font-family: 'Glyphicons Halflings'; src: url ('../fonts/glyphicons-halflings-regular.eot'); src: url ('../fonts/glyphicons-halflings-regular.eot? #iefix') формат ('embedded-opentype'), url ('../fonts/glyphicons-halflings-regular.woff') формат ( 'woff'), url ('../fonts/glyphicons-halflings-regular.ttf') формат ('truetype'), url ('../fonts/glyphicons-halflings-regular.svg # glyphicons_halflingsregular') формат ( 'svg');}. glyphicon {позиция: относительная; верх: 1px; дисплей: встроенный блок; семейство шрифтов: 'Glyphicons Halflings'; -webkit-font-smoothing: сглаживание; стиль шрифта: нормальный; шрифт: нормальный; высота строки: 1; -moz-osx-font-smoothing: grayscale;}
Таким образом, правило начертания шрифта фактически объявляет семейство шрифтов и места, где обнаружены глификоны.
.glyphicon класс объявляет относительное положение на 1 пиксель сверху, он отображается как встроенный блок, объявляет семейство шрифтов, утверждает, что стиль и вес шрифта являются нормальными, устанавливает высоту строки как 1. Кроме того, он использует -webkit-font-smoothing: antialiased и -moz-osx-font-smoothing: grayscale; , которые используются для обеспечения кроссбраузерности. согласованность.
Тогда есть
.glyphicon: empty {width: 1em;}
Для пустого глификона.
После этого есть 200 классов для каждого значка. Общий формат этих классов следующий
.glyphicon-keyword: before {content: "hexvalue";}
Для Например, для значка пользователя, используемого в нашем примере, класс выглядит следующим образом
.glyphicon-user: before {content: " e008";}
Теперь мы увидели, как его использовать, мы увидим, как настроить глификоны.
Мы начнем с нашего предыдущего примера и сделаем настройку, изменив размер шрифта, цвет и применяя текстовую тень, чтобы значок выглядел по-другому.
Ниже приведен код, который мы начнем с
А вот как это выглядит
Настройка размера шрифта
Увеличивая или уменьшая размер шрифта значков, вы можете сделать значки больше или меньше .
Настройка цвета
Применение тени текста
Надеюсь, это начнется с использования и настройки Glyphicons с вашими проектами на основе Twitter Bootstrap.
Есть вопросы? Предложения? Присоединяйтесь к обсуждению ниже. Чтобы узнать о предстоящих уроках, подпишитесь на наш канал.
