Вы слышали о значках и почти наверняка слышали о шрифтах, но что такое Icon Font ? Сегодня я покажу вам, что такое шрифты значков и как вы можете использовать их для оживления вашего сайта. Давайте начнем.
Что такое шрифты значков?
Иконочные шрифты точно такие же, как «обычные» шрифты — они определяют внешний вид фрагмента текста. Большая разница здесь заключается в том, что шрифты значков содержат не буквы и цифры, а символы и значки. Вы можете быть смущены этим, как хорошо, что шрифт, если вы не можете писать письма своей маме!
Иконочные шрифты в основном используются для оформления веб-сайтов. Так как они основаны на векторах, их можно изменять, перемещать, стилизовать и изменять с помощью CSS . Это обеспечивает огромное преимущество перед традиционными методами проектирования, такими как изображения. Внешний вид большого количества значков можно изменить с помощью всего лишь нескольких строк кода. Вам не нужно редактировать изображения, открывать Photoshop или загружать новые файлы — вы просто пишете код.
Начиная
Я буду использовать Font Awesome для этих примеров, но теория может быть применена ко многим другим пакетам шрифтов.
Вот стартовый HTML:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MUO Icon Fonts</title> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <style> html { font-family: helvetica, arial; } </style> </head> <body> </body> </html> Это минимальное количество HTML, необходимое для создания веб-страницы. Я не буду объяснять большинство из них, поскольку мы рассмотрели это в нашем руководстве о том, как сделать сайт .
Наиболее важной строкой является следующее:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Это загружает таблицу стилей Font Awesome из CDN . Без этой строки ваш сайт не знал бы, что такое Font Awesome, поэтому это очень важно. Эта таблица стилей выполняет всю сложную работу по встраиванию веб-шрифтов и, как правило, значительно упрощает работу.
Шрифты Потрясающие иконки определяются классами CSS, добавленными в теги i . Они были выбраны, так как к ним не подключен браузер или стиль, определенный по умолчанию, поэтому значки не будут испорчены. Кроме того, вы можете добавить классы, чтобы охватить теги, но это загромождает ваш HTML.
Вот основное использование. Поместите это в теги вашего тела :
<i class="fa fa-cog"></i> My First Icon
Вот как это выглядит:
Насколько это было легко? Давайте разберемся с этим. Для работы Font Awesome необходимы два класса. Первый называется fa , что означает Font Awesome. Это необходимо для любого значка, независимо от того, какой значок вы используете. Второй класс определяет конкретную иконку, которую вы хотите использовать — это может быть что угодно, самолет, человек или кредитная карта. Это также префикс fa , и, поскольку это значок cog, его имя fa-cog . Вы можете просмотреть список всех значков в Font Awesome на их веб-сайте.
Попробуйте поменять иконку с винтика на любую другую.
Идти глубже
Как только вы знаете основы, пришло время для некоторых продвинутых трюков.
Если вы не хотите писать свой собственный CSS, вы можете использовать стили, встроенные прямо в Font Awesome. Есть много классов, которые вы можете использовать, чтобы сделать иконки больше:
<i class="fa fa-battery-0 fa-lg"></i> <i class="fa fa-battery-1 fa-2x"></i> <i class="fa fa-battery-2 fa-3x"></i> <i class="fa fa-battery-3 fa-4x"></i> <i class="fa fa-battery-4 fa-5x"></i>
Еще один полезный класс — fa-spin . Это заставит вас вращать иконки, а в сочетании с предыдущими классами размера вы можете создать несколько приятных эффектов. Вот код:
<i class="fa fa-refresh fa-spin fa-3x"></i>
Вот результат:
Вращать иконки легко — используйте класс fa-rotate :
<i class="fa fa-envelope-o fa-3x"></i> <i class="fa fa-envelope-o fa-3x fa-rotate-90"></i> <i class="fa fa-envelope-o fa-3x fa-rotate-180"></i> <i class="fa fa-envelope-o fa-3x fa-rotate-270"></i>
Число в конце определяет степень поворота значка, но не увлекайтесь. Вы ограничены до 90 , 180 или 270 .
Последний трюк, который вы можете сделать, это сложить. Класс fa-stack позволяет вам комбинировать две или более иконки вместе. Вот код:
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-eyedropper fa-stack-1x"></i> </span> <span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-bell fa-stack-1x"></i> </span> <span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-cutlery fa-stack-1x"></i> </span> <span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-glass fa-stack-1x"></i> </span>
Вот как это выглядит:
Как только вы начинаете комбинировать все эти различные классы, возможности действительно становятся безграничными.
Пользовательские CSS
Поскольку пиктограммные шрифты являются просто шрифтами, их можно стилизовать с помощью CSS, как и для любого другого элемента. Использование немного CSS3 может иметь большое значение:
Вот HTML-код для этой иконки:
<i class="fa fa-motorcycle fa-5x bike"></i>
Вот CSS:
@keyframes move { from { margin-left: 0; } to { margin-left: 400px; } } .bike { animation-name: move; animation-duration: 4s; }
Этот CSS довольно простой, но он имеет большое влияние. Это не учебник по CSS, поэтому вы можете изучить CSS если вы хотите узнать больше о внутренней работе.
Вы можете сделать некоторые специальные вещи, если вы действительно хотите:
Это немного запинается, чтобы уменьшить размер файла в Интернете. Вот HTML-код:
<i class="fa fa-user-circle person fa-5x" id="p1"></i> <i class="fa fa-user-circle person fa-5x" id="p2"></i> <i class="fa fa-user-circle person fa-5x" id="p3"></i> <i class="fa fa-user-circle person fa-5x" id="p4"></i>
Вот CSS:
@keyframes fade { from { opacity: 0; } to { opacity: 1; } } .person { opacity: 0; animation-name: fade; } #p1 { color: red; animation-duration: 2s; } #p2 { color: orange; animation-duration: 4s; } #p3 { color: green; animation-duration: 6s; } #p4 { animation-duration: 8s; }
Как и в предыдущем примере, здесь используются CSS3-анимации. Создается анимация, называемая fade , и каждый значок персонажа реализует эту анимацию с разным временем. У этих значков и CSS3 есть большой потенциал, чтобы сходить с ума.
Это все на сегодня. Теперь вы сможете использовать Icon Fonts для оживления вашего сайта! Если вы пока не уверены в своих навыках, посмотрите эти сайты-шаблоны или эти каналы на YouTube для начала с веб-дизайном.
Вы узнали что-нибудь новое сегодня? Какой твой любимый Icon Font? Дайте нам знать в комментариях ниже!