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

Реклама

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

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

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

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

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

Начиная

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

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

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

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

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

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

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

 Моя первая иконка

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

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

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

Идти глубже

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

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

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

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

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

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

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

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

Как только вы начинаете комбинировать все эти различные классы, возможности действительно безграничны.

Пользовательские CSS

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

Вот HTML-код для этой иконки:

Вот CSS:

@keyframes move {от {margin-left: 0; } to {margin-left: 400px; } } .bike {animation-name: move; продолжительность анимации: 4 с; }

Этот CSS довольно простой, но он имеет большое влияние. Это не учебник CSS, поэтому вы можете захотеть учить CSS 10 простых примеров кода CSS, которые вы можете выучить за 10 минутХотите узнать больше об использовании CSS? Попробуйте эти базовые примеры кода CSS, а затем примените их к своим собственным веб-страницам. Подробнее если вы хотите узнать больше о внутренней работе.

Вы можете сделать некоторые специальные вещи, если вы действительно хотите:

Это немного запинается, чтобы уменьшить размер файла в Интернете. Вот HTML-код:

Вот CSS:

@keyframes fade {from {opacity: 0; } до {непрозрачность: 1; } } .person {opacity: 0; название анимации: исчезать; } # p1 {color: red; продолжительность анимации: 2 с; } # p2 {цвет: оранжевый; продолжительность анимации: 4 с; } # p3 {цвет: зеленый; продолжительность анимации: 6 с; } # p4 {длительность анимации: 8 с; }

Как и в предыдущем примере, здесь используются CSS3-анимации. Анимация называется увядать создается, и каждый значок персонажа реализует эту анимацию с переменным временем. У этих значков и CSS3 есть большой потенциал, чтобы сходить с ума.

Это все на сегодня. Теперь вы сможете использовать Icon Fonts для оживления вашего сайта! Если вы еще не уверены в своих навыках, посмотрите эти CSS шаблоны сайтов 11 сайтов шаблонов CSS: не начинайте с нуля!В Интернете доступны тысячи бесплатных CSS-шаблонов, которые охватывают современные тенденции и технологии дизайна. Вы можете использовать их в оригинальном виде или настроить их, чтобы сделать их своими. Подробнее или эти Каналы YouTube, чтобы начать Хотите узнать веб-дизайн? 7 каналов YouTube для начала работыНа YouTube есть тысячи видео и каналов для начинающих веб-дизайнеров. Здесь мы рассмотрим некоторые из лучших для начала. Подробнее с веб-дизайном.

Вы узнали что-нибудь новое сегодня? Какой ваш любимый Icon Font? Дайте нам знать в комментариях ниже!