BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

2015-06-21 / Вр:23:46 / просмотров: 5176

В этом уроке вы узнаете, как использовать на сайте иконки 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:

как добавлять иконку Glyphicons на Bootstrap

В итоге, если вы вставите вот этот код в Bootstrap:

<span class="glyphicon glyphicon-phone">

то  увидите вот такой результат:

как добавлять иконку Glyphicons на Bootstrap

Теперь в примере я сделаю четыре разных размера иконки:

<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>

Результат:

как добавлять иконку Glyphicons на Bootstrap

Теперь продемонстрирую иконку на кнопке (как создать кнопку Bootstrap 3 рассмотрим в других уроках) и первую иконку закрашу красным цветом:

<button type="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>

Результат:

как добавлять иконку Glyphicons на Bootstrap

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

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

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

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

Subscribe without commenting

Метки: ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 729
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3977