Иконки от Glyphicons. Основы bootstrap 3 для начинающих. Урок №6

Всем привет!
Продолжаем изучать основы «bootstrap3».
В сегодняшнем уроке вы научитесь выводить красивые иконки Glyphicons.

Фреймворк bootstrap3 содержит 200 качественных иконок из набора Glyphicons Halflings. В эти иконки можно вносить изменения: менять цвета, увеличивать размеры, при этом качество иконок теряется не будет.

Таблица всех иконок bootstrap3:

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

Чтобы использовать иконки Glyphicons на сайте, нужно добавить тег <span> или <i>, прописать базовый класс значков «glyphicon», и потом через пробел добавить класс нужной иконки
«glyphicon-название_иконки»:

<span class="glyphicon glyphicon-название_иконки"></span>

«название_иконки» - берите из таблицы (см. схема №1).

Схема №1

Вот так выглядит код:

<span class="glyphicon glyphicon-send"></span>

Или так:

<i class="glyphicon glyphicon-send"></i>

Результат:

Размер иконок

Можно указать размер иконкам.

btn-lg -  большая иконка

btn-sm - маленькая иконка

btn-xs - очень маленькая иконка

<span class="glyphicon glyphicon-phone btn-lg"></span>
<span class="glyphicon glyphicon-phone btn-sm"></span>
<span class="glyphicon glyphicon-phone btn-xs"></span>
<span class="glyphicon glyphicon-phone"></span>

* последняя иконка по умолчанию.

Результат:

Можно размеры указать через CSS файл, но это подробно будем рассматривать на практике, когда будем создавать полноценную страницу на bootstrap3. Сейчас просто покажу сам код:

.название_иконки
{
font-size: 50px; //размер иконки
}

Пример:

.glyphicon-file
{
font-size: 50px; //размер иконки
}

Таким способом можно указать абсолютно любой размер. Ставить размер можно и в пикселях и в процентах.

Можно размер добавить и вот таким способом:

<span class="glyphicon glyphicon-file" style="font-size:50px;"></span>

Я добавил CSS стиль прямо к иконке «style="font-size:50px;»

Результат:

Цвет иконок

Теперь поменяем цвет иконке. Сделаем иконку красным цветом. Для этого добавьте к иконке «style="color: red;"».

<span class="glyphicon glyphicon-phone" style="color:red;"></span> 

Можно через CSS файл:

. glyphicon-phone
{
color: red; //цвет иконки
}

Результат:

Иконка в кнопке

Можно также сделать кнопку, внутри которой будет находиться иконка.

<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-phone" style="color:red;"></span> Мобильная версия</button>

Результат:

Мобильная версия