Від автора: я вітаю вас. Одним з компонентів фреймворку бутстрап є иконочный шрифт. Сьогодні заключна стаття з циклу статей з Bootstrap і ми розглянемо, як працюють в Bootstrap іконки.
Власне, використовувати іконки дуже просто. Щоб подивитися їх назви та інструкцію щодо вставки на сторінку, ви можете використовувати ту ж саму документацію. Перейдіть в розділ Компоненти і там першим ділом буде саме розділ про иконочный шрифт. Документація
Власне, вам треба знати лише назву потрібного гліфа або іконки, тому що вставка на сторінку відбувається дуже просто:
Всі іконки і їх назви перераховані в документації:
А ми з вами давайте краще поміркуємо на тему того, що можна робити з цими значками і в чому їх переваги перед зображеннями. Для початку я просто ставлю іконку.
У мене там з минулої статті залишився код, ось він:
Заголовок
Всередину абзацу, який з допомогою класу h1 ми перетворюємо в заголовок першого рівня (тільки зовні), вставляємо іконку. Хочу вас попередити, щоб у такому випадку ви завжди ставили пробіл перед текстом, щоб гліф і текст мали між собою хоча б невеликий відступ.
Гліф отримує такий же колір і розмір, що і текст в її блоці. Достатньо лише змінити стилі для класу h1:
color: #EBEDC9;
font-size: 12px;
Загалом, це иконочный шрифт, тому значки можна робити будь-яких розмірів і будь-якого кольору. Що ще можна з нею зробити?
Наприклад, її можна зробити посиланням, обернувши тегом a. Їй можна задати оформлення, відмінне від стоїть поруч тексту.
.h1 span{
color: brown;
font-size: 32px;
-webkit-filter:drop-shadow(2px 2px 0 yellow);
}
Результат:
Можна зробити так, щоб при наведенні на іконку її оформлення змінювалося, змінити її положення, кольори, розміри і т. д.
Як зробити анімовані іконки для Bootstrap?
Ну це вже ваша турбота. Можна зробити так: прописати потрібні вам анімаційні ефекти та класи, які будуть відповідати за активацію цих ефектів, після чого застосовувати їх до потрібних іконок коли це необхідно. Тобто зробити свого роду свій анімаційний міні-фреймворк.
Наведу приклад, щоб ви могли зрозуміти, як вам діяти. Вставляємо іконку:
Збільшимо її в розмірах за допомогою стилів:
.glyphicon-earphone{
font-size: 60px;
color: green;
}
Створюємо анімаційні ефекти. Нехай наш телефон повертає туди-сюди, так часто роблять на лендингах, щоб показати клієнту, що він може замовити зворотній дзвінок:
@keyframes tel{
50%{transform:rotate(45deg)}
100%{transform:rotate(-45deg)}
}
Створюємо клас, який буде активувати нескінченну кількість повторів анімації:
.tel-anim{
animation-name: tel;
animation-duration: 1s;
animation-iteration-count: infinite;
}
Все залишається тільки прописати цей клас іконці і вона почне повертатися. Цей клас можна вже прописувати будь-який інший іконці і з нею станеться те ж саме. Ви можете повертати іконки на 180, 360 (та й взагалі на будь-яку кількість градусів), збільшувати, зменшувати, додавати тіні і т. д. Ну взагалі робити все, що тільки можна в css.
Що ж, трохи практичних прикладів ми розібрали, ну а я ще обіцяв вам розповісти про парі переваг, які є у таких іконок перед реальними зображеннями. По-перше, иконочный шрифт в будь-якому випадку буде подгружаться на сторінку швидше, тим десятки і сотні нехай навіть маленьких картинок, навіть якщо оптимізувати їх і з’єднати в спрайт.
По-друге, при збільшенні розмірів такі іконки не будуть погіршуватися. Ви взагалі можете забути про проблеми, пов’язаних з якістю, тому що це векторні іконки. Ну і по-третє, не треба буде морочитися з вирівнюванням зображень.
Ми розглянули тільки вставку значків у заголовок, насправді їх можна додавати куди завгодно: в списки, в менюшки, кнопки і т. д. Наприклад, ось таке меню можна зробити без проблем:
Власне, вбудованим шрифтом фреймворку не варто обмежуватися, його може не вистачити на всі випадки життя, тому іноді вам потрібно підключати і інші набори гліфів, більш багаті.
Отримати реальну практику верстки на Bootstrap, в тому числі і практику вставки гліфів у шаблони сайтів, ви можете в нашому курсі, присвяченому адаптивної верстці на Bootstrap. Що ж, на цьому я закінчую даний цикл статей і щиро сподіваюся, що Bootstrap став для вас зрозуміліше.
