Иконки шрифты потрясающие для вашего сайта: вот почему

Вы слышали о иконках и почти наверняка слышали о шрифтах, но что такое Иконка Шрифт? Сегодня я покажу вам, что такое шрифты значков и как вы можете использовать их для оживления вашего сайта. Давайте начнем.

Что такое шрифты значков?

Иконочные шрифты точно такие же, как «обычные» шрифты — они определяют внешний вид фрагмента текста. Большая разница здесь заключается в том, что шрифты значков содержат не буквы и цифры, а символы и значки. Вы можете быть смущены этим, как хорошо, что шрифт, если вы не можете писать письма своей маме!

Иконочные шрифты в основном используются для оформления веб-сайтов. Поскольку они основаны на векторах, их можно изменять, перемещать, стилизовать и изменять с помощью CSS.

, Это обеспечивает огромное преимущество перед традиционными методами проектирования, такими как изображения. Внешний вид большого количества значков можно изменить с помощью всего лишь нескольких строк кода. Вам не нужно редактировать изображения, открывать Photoshop или загружать новые файлы — вы просто пишете код.

Начиная

Я буду использовать Font Awesome для этих примеров, но теория может быть применена ко многим другим пакетам шрифтов.

Вот стартовый HTML:

MUO Icon Fonts
html {
font-family: helvetica, arial;
}

Это минимальное количество HTML, необходимое для создания веб-страницы. Я не буду объяснять большинство из них, поскольку мы рассмотрели это в нашем руководстве о том, как сделать сайт.

Наиболее важной строкой является следующее:

Это загружает таблицу стилей Font Awesome из CDN. Без этой строки ваш сайт не знал бы, что такое Font Awesome, поэтому это очень важно. Эта таблица стилей выполняет всю сложную работу по встраиванию веб-шрифтов и, как правило, значительно упрощает работу.

Значки Font Awesome определяются классами CSS, добавленными в я теги. Они были выбраны, так как к ним не подключен браузер или стиль, определенный по умолчанию, поэтому ваши значки не будут перепутаны. Кроме того, вы можете добавить классы в пролет теги, но это загромождает ваш HTML.

Вот основное использование. Поместите это в свой тело теги:

 My First Icon

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

Насколько это было легко? Давайте разберемся с этим. Для работы Font Awesome необходимы два класса. Первый называется фа, который обозначает Font Awesome. Это необходимо для любого значка, независимо от того, какой значок вы используете. Второй класс определяет конкретную иконку, которую вы хотите использовать — это может быть что угодно, самолет, человек или кредитная карта. Это также с префиксом фа, и так как это значок Cog, его имя фа-зубчатая. Вы можете просмотреть список всех значков в Font Awesome на их сайте.

Попробуйте поменять иконку с винтика на любую другую.

Идти глубже

Если вы знаете основы, настало время для некоторых продвинутых трюков.

Если вы не хотите писать свой собственный CSS, вы можете использовать стили, встроенные прямо в Font Awesome. Есть много классов, которые вы можете использовать, чтобы сделать иконки больше:

Еще один полезный класс для использования фа-спин. Это заставит вас вращать иконки, и в сочетании с предыдущими классами размера вы можете создать несколько приятных эффектов. Вот код:

Вот результат:

Вращать значки легко — используйте фа-поворот учебный класс:

Число в конце определяет степень поворота иконки, но не увлекайтесь. Вы ограничены 90, 180, или же 270.

Последний трюк, который вы можете сделать, это сложить. фа-стек Класс позволяет объединить две или более иконки вместе. Вот код:

if you want to know more about the inner workings.
You can do some special things if you really want to:
This stutters a little bit in order to reduce the file size for the web. Here’s the HTML:

Вот 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-анимации. Анимация называется увядать создается, и каждый значок персонажа реализует эту анимацию с переменным временем. У этих значков и CSS3 есть большой потенциал, чтобы сходить с ума.
Это все на сегодня. Теперь вы сможете использовать Icon Fonts для оживления вашего сайта! Если вы еще не уверены в своих навыках, ознакомьтесь с этими сайтами-шаблонами CSS.
или эти каналы YouTube, чтобы начать
с веб-дизайном.
Вы узнали что-нибудь новое сегодня? Какой твой любимый Icon Font? Дайте нам знать в комментариях ниже!