И снова здравствуйте, мои любознательные читатели и гости блога. Сегодня займемся разбором очень простой, но полезной темы – это Bootstrap иконки. В данной публикации я расскажу, какие иконки предоставляются для бесплатного пользования в Bootstrap 3, как осуществляется их подключение, приведу контрольный пример, а также затрону Font Awesome.
Ну а теперь давайте перейдем к разбору полетов!
Интересные факты об иконках фреймворка
В фреймворке небольшие векторные изображения, которые мы привыкли называть иконками, называются Glyphicon. Bootstrap предоставляет своим пользователям набор под названием Glyphicon Halflings, включающий 260 специальных наборных знаков. Название и внешний вид каждого из них можно посмотреть на официальном сайте.
Интересным является то, что данные иконки обычно невозможно найти в свободном доступе, так как их разработчик на своем сайте http://glyphicons.com/ предоставляет их за определенную плату. Однако специально для изучаемого вами фреймворка он сделал исключение. Взамен любой юзер, который пользуется его наборами символов, должен вставлять ссылку на указанный выше сайт.
Области использования Glyphicons
Думаю при просмотре веб-страницы с иконками вы узнали многие из них. Из этого следует, что они используются для сайтов, социальных сетей, веб-приложений и всевозможных сервисов.
Огромным преимуществом данных наборных значков является то, что их можно вставлять в практически любые элементы языка разметки html: в input, кнопки, toolbars (различные панели инструментов), меню, навигационные элементы, формы регистрации и входа и т.д.
Как же скачать и подключить набор иконок?
На самом деле все очень просто. Если вы подключаете сам фреймворк через CDN, то также обязательно подключаете и стили css. Иначе без этого ничего не работает, а следственно спецсимволы не отображаются. Наборы обсуждаемых значков расположены именно там:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Аналогично если вы скачиваете весь пакет фреймворка. Тогда строка подключения стилевых правил несколько изменится:
<link rel="stylesheet" href="путь_к_файлу/bootstrap.min.css">
При этом вы сможете найти иконочный шрифт в каталоге под названием fonts. Там лежит не один файл, а целых 5. Это необходимо для того, чтобы все глифы корректно отображались в разных браузерах, т.е. были кроссбраузерными.
Если же вы предпочитаете скачать исключительно иконки, то во вкладке Costomize в компонентах можно выбрать только Glyphicons.
Контрольный пример
Для наглядности я решил привести комплексный контрольный пример, в котором по максимуму отображено использование глифов.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<form>
<h2>Пример использования глифов</h2>
<div class="form-group">
<label for="email" ><span class="glyphicon glyphicon-envelope"></span> Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd" ><span class="glyphicon glyphicon-eye-close"></span> Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<button type="submit" class="btn btn-success"> <span class="glyphicon glyphicon-ok"></span> Submit</button>
</form>
</div>
</body>
</html> |
Поговорим немного о Font Awesome
Данный продукт создан как дополнение к Bootstrap, который предоставляет своим пользователем абсолютно бесплатные дополнительные векторные иконки, в том числе и для соц. сетей. Он также прекрасно работает и с другими фреймворками.
Для работы с ним нужно скачать установочный файл с официального сайта http://fontawesome.ru/. А после этого в хедере веб-страницы подключить стили:
<link rel="stylesheet" href="путь_к_каталогу/font-awesome/css/font-awesome.min.css">
Не забудьте скачанный каталог с Font Awesome вставить в папку с проектом.
Далее в коде для указания нужно символа стоит прописывать нечто похожее на Glyphicons:
<a class="btn btn-block btn-social btn-facebook">
<span class="fa fa-facebook"></span> Facebook
</a>
На этой ноте я и закончу свое повествование. Делитесь ссылками на интересные статьи моего блога с друзьями и конечно же подписывайтесь на обновления. Пока-пока!
С уважением, Роман Чуешов
