Font awesome как использовать: Начало работы с Font Awesome

или

Спасибо, просто скачать
Font Awesome 4

Как использовать Font Awesome на вашем сайте WordPress

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

Font Awesome WordPress Иконки

Использование библиотеки Font Awesome на вашем сайте WordPress относительно безболезненно. Выполнив эти простые шаги, вы сможете сократить время загрузки страницы и создать действительно чистые и четкие рисунки, используя эти значки в качестве части своей работы.

Следует помнить, что (в большинстве случаев) иконки Font Awesome будут доставляться на ваш сайт как настоящие шрифты. Отсюда и название Font Awesome. Вы сможете стиль и манипулировать ими во всех отношениях.

Из-за этого вам не придется беспокоиться о размере или интервале для каждого отдельного браузера или области просмотра. Если это звучит здорово, это потому, что это так. А вот как вы это можно сделать:

Установка Font Awesome

Хотя есть ручной способ установки и использования Font Awesome, есть лучший способ для пользователей WordPress. Прекрасные ребята из FA выпустили официальный плагин Font Awesome для WordPress, и он прекрасно работает.

С установленным и активированным плагином у вас теперь есть доступ к шорткоду [[icon name]], а также к фрагментам HTML. До тех пор, пока вы держите в руках удобный список значков FA, вы точно знаете, какой значок вам нужен. Вы увидите на странице настроек плагина (находится в разделе « Настройки» – «Font Awesome» ), как все настроено по умолчанию. В общем, это хорошо для хранения и использования. Большинству людей больше ничего не нужно.

Параметр Метод, вероятно, является наиболее важным для большинства людей. Вы можете переключаться между Webfont или SVG. В то время как SVG предоставляет вам больше возможностей и функций (таких как силовые преобразования и маскирование), Font Awesome CDN будет предоставлять значки в виде файлов SVG, а не в виде шрифта. Хотя это лучше в некоторых отношениях, SVG не распознается многими браузерами, и WordPress не всегда хорошо работает с изображениями SVG. Поэтому мы рекомендуем играть безопасно с версией веб-шрифта.

То же самое относится и к Font Awesome: если вы не уверены в разнице или не знаете, зачем вам нужно использовать SVG, тогда придерживаться метода webfont по умолчанию, вероятно, проще всего.

Использовать иконки Font Awesome на вашем сайте WordPress очень просто. Просто добавьте <i class = “fab fa-wordpress”> </ i> в любое место, где вы хотите, чтобы значок появлялся. Обязательно проверьте библиотеку значков, чтобы узнать, какое имя вставить.

Примечание: шорткоды в плагине являются хитами. Некоторые значки отображаются отлично, в то время как другие отображаются пустыми. Мы рекомендуем придерживаться HTML-вставки, если вы не видите, что шорткод работает для вас. См. Ниже пример WordPress, приведенный выше: не рендеринг, а значок камеры.

Плагин Font Awesome WordPress отлично подходит для людей, которым неудобно заходить в свою тему или файлы для вставки необходимого кода. Однако, если вам это удобно, вы можете следовать этим инструкциям, чтобы получить значки Font Awesome на своем сайте.

Установка Font Awesome Icons вручную

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

Следующий шаг – просто скопировать / вставить. Но вы должны убедиться, что вы выделили опцию webfont, как мы обсуждали ранее.

В большинстве тем есть место для автоматической вставки кода в

сайта. Например, в случае с Divi вы должны войти в Параметры темы – Интеграция и вставить этот код в поле с надписью Добавить код в заголовок вашего блога .

Когда вы нажмете «Сохранить», вы можете начать добавлять любые значки, которые вы хотите, как мы делали выше. Только у вас нет доступа к шорткоду при этом.

Если ваша тема не поддерживает интеграцию кода

Если вы не можете найти такое место в своей теме, это также легко сделать вручную. Однако для этого вам придется копаться в файлах Core вашей темы, но это очень быстрое копирование / вставка, и (как правило) это довольно безопасно. Перейдите в Внешний вид – Редактор на панели инструментов WP и найдите файл header.php.

Найдите строку, в которой написано </head>, и перед ней вам нужно вставить тот же код из Font Awesome. Нажмите Обновить файл, и вы сможете сразу начать использовать значки FA. 

Дополнительные параметры для установки

И если у вас есть другие, более конкретные потребности в Font Awesome, они предлагают множество способов получить доступ к библиотеке. От установок NPM и Yarn до интеграции Sketch и React у них есть масса опций, если они вам нужны не только для WordPress.

Styling Font Awesome Icons

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

На сайте Font Awesome есть примеры того, как это сделать. Они показывают размеры, используя свою иконку igloo и дополнительный класс, такой как fa-xs  или fa-xl  или fa-2x для определенного размера.

Кроме того, если вам нужно, чтобы значок был относительно определенного размера и абсолютные значения не работали, вы можете поместить его в собственный

, чтобы он работал в рамках ваших ограничений.

Завершение

И это все! Круто, верно? Независимо от того, используете ли вы плагин Font Awesome WordPress или вставляете код вручную, для запуска  сайта достаточно нескольких шагов. Font Awesome популярен по определенной причине, и отчасти это объясняется простотой использования. 

Какой ваш любимый способ использовать иконки Font Awesome?

Статья с изображением любезно предоставлена ​​Font Awesome

Как добавить иконки | Font Awesome Docs

Вы можете размещать значки Font Awesome практически в любом месте, и мы постарались сделать так, чтобы значки приобретали характеристики и естественным образом сливались с окружающим текстом.

Advertisement

Мы рассмотрим основы того, как добавлять значки в ваш проект, сокращенные имена классов для различных стилей значков, как добавлять значки в HTML, использовать псевдонимы значков и многое другое!

Перед началом работы

Убедитесь, что у вас есть:

• Установите Font Awesome в своем проекте и узнайте, где вы припарковали свою Тардис.

Основы

Чтобы добавить значок, вам нужно знать несколько битов информации:

1. Сокращенное имя класса для стиля , который вы хотите использовать
2. Имя значка с префиксом fa-90 (означает, естественно, «Font Awesome»!)
3. Сокращенное имя класса для семейства , которое вы хотите использовать Необязательно

Семейства + Стили

Существует три семейства иконок Font Awesome, каждое из которых имеет уникальный внешний вид, имя класса и семейство шрифтов @font-face . И в Font Awesome Classic, и в Sharp есть пять стилей значков Font Awesome. Here are some examples:

Classic Family

Style	Availability	Style class	font-weight	Looks like
Solid	Free Plan	fa-solid	900
Regular	Pro only	fa-regular	400
Light	Pro only	FA-Light	300
THIN	PRO только	FA-THIN	100		100		. 0059
Duotone	Pro only	fa-duotone	900

Sharp Family

Семейство брендов

. мы рекомендуем вам придерживаться последовательного элемента в вашем проекте. Мы рекомендуем использовать элемент с CSS-классами Font Awesome для класса стиля 9.0025 для стиля значка, который вы хотите использовать, и класс имени значка с префиксом fa- для значка, который вы хотите использовать. Люди, ориентированные на специальные возможности, могут выбрать элемент вместо .

Вот пример:

Установка различных семейств + стилей

А вот пример, который ссылается на разные стили и семейства значков:

Псевдонимы

Мы обновили многие из наших имен значков в Версии 6, чтобы сделать их более универсальными и последовательно. Но мы хотели убедиться, что ваш существующий код не сломается, поэтому мы создали псевдонимы для переименованных значков, чтобы они могли работать как со старыми, так и с новыми именами.

Вы также можете использовать старое или новое имя для стилей. Таким образом, вы все еще можете использовать fas , far , fal , fad и fab . И мы также включили старые версии префикса для нашего нового стиля Thin ( fat ) и нового семейства стилей Sharp (Sharp solid — fass ).

Реклама

Альтернативные способы добавления значков

У нас также есть много других способов добавления значков Font Awesome, если в вашей ситуации требуется что-то особенное:

При использовании веб-шрифтов

• Добавьте значки, используя только CSS с псевдоэлементами.

When using SVGs

• Use SVGs without JS using our SVG Sprites
• Bring-Your-Own style with our bare SVGs
• Use SVG symbols to improve performance with repeating icons
• Use an Icon’s Unicode value

Псевдоэлементы CSS | Font Awesome Docs

Если изменение HTML в вашем проекте невозможно, вы можете использовать функцию CSS для добавления значков на страницу при использовании веб-шрифтов Font Awesome.

Реклама

Работа с псевдоэлементами не для слабонервных.

Ссылка на значки с использованием псевдоэлементов более сложна и подвержена ошибкам, чем стандартный способ добавления элемента в ваш HTML.

Убедитесь, что вы хорошо разбираетесь в CSS и хотите узнать о некоторых основах, на которых работает Font Awesome.

О псевдоэлементах

CSS имеет мощную функцию, известную как псевдоэлементы (opens new window), которая позволяет вам визуально добавлять содержимое на страницу только с помощью CSS. Font Awesome использовал ::before псевдоэлемент для добавления значков на страницу, так как Font Awesome был совсем молодым.

Мы уже узнали, что Font Awesome использует такие классы, как fa и fa-user , для отображения иконок на вашем сайте. Давайте продублируем функционал этих классов и напишем свой, используя псевдоэлементы CSS.

Добавление значка с помощью псевдоэлементов CSS

1.

Определение общего CSS для всех значков

Во-первых, вам нужно добавить некоторые общие свойства CSS, применимые ко всем значкам. Лучше сначала избавиться от этого, чтобы упростить свой индивидуальный значок CSS. Вы можете сделать это отдельным правилом или включить стиль в каждое отдельное правило значка (на следующем шаге).

2. Ссылка на отдельные значки

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

Задайте для свойства CSS font правильное пользовательское свойство CSS (см. таблицу семейств ниже). Но учтите, что дуотоны нуждаются в особом обращении.

Установите для содержимого значение Unicode одной из наших иконок.

Here’s a handy chart of the font styles/weights you can use:

Style	Availability	@font-face font-family	@font-face weight	CSS Custom Property
Бренды	БЕСПЛАТНЫЙ ПЛАН	FONT Awesom0064
SOLIT	БЕСПЛАТНЫЙ ПЛАН	FONT Awesom	Pro только	Font Awesom0031	300	-FA-FONT-Light
THIN	PRO только	FONT Awesom
Sharp Solid	PRO только	Font Awesom ve рассматривается ниже в псевдоэлементах CSS и Duotone. См. Псевдоэлементы CSS в действии! Нужен более практический пример того, как это сделать? Вот демонстрация Codepen (открывается в новом окне), показывающая, как отображать значки всех стилей с помощью псевдоэлементов CSS с помощью нашей платформы на основе веб-шрифтов. Реклама Псевдоэлементы CSS и Duotone Использование псевдоэлементов CSS для рендеринга двухцветных значков следует аналогичной настройке, но требует использования псевдоэлементов ::before и ::after вместе с дополнительные настройки стиля. 1. Определите общий CSS для значков Duotone Существуют общие свойства CSS, уникальные для стиля Duotone, которые потребуются для всех значков Duotone. Опять же, лучше сначала убрать это в CSS, чтобы упростить определения значков. Добавьте стиль к элементам, которые будут содержать псевдоэлемент для поддержки позиционирования. Установите для шрифта пользовательское свойство CSS, добавьте необходимые сбросы стилей шрифта и добавьте стили позиционирования для псевдоэлемента. Установите уровни непрозрачности и цвета по умолчанию для каждого слоя двухцветного значка. 2. Ссылки на отдельные слои значков Ссылки на отдельные двухцветные значки работают так же, как и все значки псевдоэлементов CSS. Установите для содержимого значение Unicode одной из наших иконок. Для иконок Duotone у вас будет два значения — по одному для каждого слоя Duotone. Для door-open у вас будет \f52b для основного уровня и \f52b\f52b для вторичного уровня. Advertisement Псевдоэлементы и Sass (SCSS) С помощью наших утилит @include fa-icon- mixin вы можете легко добавлять значки с помощью пользовательских псевдоэлементов CSS. Эти примеси обрабатывают базовый рендеринг, который мы включаем в наш набор инструментов, чтобы значки отображались идеально. Наряду с этим они определяют правильный стиль значка для отображения значка. Если вы предпочитаете определять эти правила стиля вручную, это тоже вариант. Если вы используете наши примеси для рендеринга значка в нашем семействе стилей Sharp, вам потребуется ссылка на @include fa-family-sharp миксин вместе с миксином @include fa-icon- . Псевдоэлементы и Less С помощью наших утилит .fa-icon- mixin вы можете легко добавлять значки с пользовательскими псевдоэлементами CSS. Эти примеси обрабатывают базовый рендеринг, который мы включаем в наш набор инструментов, чтобы значки отображались идеально. Наряду с этим они определяют правильный стиль значка для отображения значка. Если вы предпочитаете определять эти правила стиля вручную, это тоже вариант. Если вы используете наши миксины для рендеринга значка в нашем семействе стилей Sharp, вам потребуется ссылка на миксин .fa-family-sharp вместе с миксином .fa-icon-. Реклама Псевдоэлементы CSS с нашей платформой SVG+JS Если вы используете нашу инфраструктуру SVG + JS для рендеринга значков, вам нужно сделать несколько дополнительных действий: Включить псевдоэлементы CSS Использование Псевдоэлементы для рендеринга значков по умолчанию отключены при использовании нашего SVG + JS Framework. No related posts. Вперед Пошаговое создание сайта на wordpress для чайников: полное руководство для новичков – установка, настройка, работа с сайтом Назад Программа для редактирования субтитров: AegiSub для Windows — Скачайте бесплатно с Uptodown Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт Рубрики Css Html Http Javascript Photoshop Верстка Вопросы и ответы Макет Развитие сайтов Сайт Шаблон Шрифт Разное Рубрики Css Html Http Javascript Linux Photoshop Адаптив Верстка Вопросы и ответы Макет Развитие сайтов Разное Сайт Советы Шаблон Шаблоны Шрифт Шрифты