В этом уроке вы узнаете, как использовать на сайте иконки Glyphicons на Bootstrap 3.
В Фреймворке Bootstrap содержится 200 иконок в формате шрифта из набора Glyphicons Halflings. Выводятся иконки с помощью специальных CSS классов. Цвет можно задать с помощью CSS стиля со свойством «color». Все это я покажу на примерах, а сейчас посмотрите таблицу всех иконок Glyphicons, которую предоставляет Bootstrap 3.
○ Как использовать иконки Glyphicons на Bootstrap?
Чтобы использовать иконки Glyphicons на Bootstrap, нужно добавить тег <span> или <i>. К тегу <span> или <i> нужно добавить базовый класс значков «glyphicon» и потом через пробел добавить класс нужной иконки «glyphicon-*».
«*» - это индивидуальное название иконки. Название иконки можете брать из таблицы, что вы видели сверху.
Вот пример как добавлять иконку Glyphicons на Bootstrap:
В итоге, если вы вставите вот этот код в Bootstrap:
<span class="glyphicon glyphicon-phone">
то увидите вот такой результат:
Теперь в примере я сделаю четыре разных размера иконки:
<span class="glyphicon glyphicon-phone btn-lg"></span> <span class="glyphicon glyphicon-phone"></span> <span class="glyphicon glyphicon-phone btn-xs"></span> <span class="glyphicon glyphicon-phone btn-sm"></span>
Результат:
Теперь продемонстрирую иконку на кнопке (как создать кнопку Bootstrap 3 рассмотрим в других уроках) и первую иконку закрашу красным цветом:
<button ENGINE="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-phone" style="color:red;"></span> Мобильная версия</button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-phone"></span> Мобильная версия</button> <button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-phone"></span> Мобильная версия</button> <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-phone"></span> Мобильная версия</button>
Результат:
Вот такой вот урок получился. Если было интересно, скажите об этом мне и другим, нажав на кнопку социальных сетей.
Если хотите знать о появлении новых статей на блоге, подписывайтесь на обновление.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 314630 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 262566 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 188713 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 182123 -
Как включить или отключить Aero в Windows 7
Дата: 1 июня 2013
Прокомментировано:6
просмотров: 154203
смешно звучит!!! Сам WP и плагины из файлов php. Если хотите безопасность, используйте…
⇒ Открыть статью ⇐