Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

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

09.06.2016


09:29


6211


2


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

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

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

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

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

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

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

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

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

Схема №1

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

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

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

Результат:



Случайные записи:

  1. Как создать слайдер (карусель). Основы bootstrap 3 для начинающих. Урок №18
  2. Cкелет HTML. Основы HTML для начинающих. Урок №1
  3. Работа со строками в php. Основы PHP с нуля. Урок №7
  4. Шпаргалка по HTML на русском языке
  5. Горизнтальное меню. Основы bootstrap 3 для начинающих. Урок №10

Последние записи рубрики:

  1. Бесплатный курс по основам Bootstrap3
  2. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  3. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  4. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
  5. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

2 ответа(ов) на статью: “Иконки от Glyphicons. Основы bootstrap 3 для начинающих. Урок №6”

  1. Дарья says:

    Здравствуйте!
    Пожалуйста, подскажите, какой из css файлов использовать : bootstrap.css или main.css? :???:

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Здравствуйте, Дарья!
    bootstrap.css - это стандартные стили для bootstrap
    main.css - скорее всего, это файл с дополнительными стилями к дизайну сайта, написанные автором верстальщиком веб-страницы.
    В таком случае, нужно использовать два CSS файла.

    Ответить

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

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

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

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

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245