Уроки Bootstrap 3.0 для начинающих (10-й урок) – иконки от Glyphicons

В этом уроке вы узнаете, как использовать на сайте иконки Glyphicons на Bootstrap 3.
В Фреймворке  Bootstrap содержится 200 иконок в формате шрифта из набора Glyphicons Halflings. Выводятся иконки с помощью специальных CSS классов. Цвет можно задать с помощью CSS стиля со свойством «color». Все это я покажу на примерах, а сейчас посмотрите таблицу всех иконок Glyphicons, которую предоставляет Bootstrap 3.

[Смотреть иконки Glyphicons]

○ Как использовать иконки 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>

Результат:

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: Bootstrap, основы