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

Содержание

Как подключить и использовать Font Awesome 5. Полное руководство.

Доброго времени суток, читатели моего блога! Мне постоянно поступает масса вопросов по шрифту Font Awesome – «Как подключить Font Awesome?», «Как его использовать на сайте или в Photoshop?», «Почему отображаются вместо иконок квадратики?» и тому подобные. И я решил сделать подробное руководство по Font Awesome 5, в котором вы найдете ответы на все эти вопросы.

Как подключить Font Awesome

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

Подключение с помощью CDN

Чтобы подключить иконочный шрифт Font Awesome 5 с помощью CDN необходимо перейти на страницу: Font Awesome Start и выставить необходимые параметры. Полученный код вставляем в тег <head> вашего сайта, на тех страницах где вы собираетесь использовать иконки.

Скриншот №1

На скриншоте №1 изображены настройки, которые я использую.

Выбираем версию, которая нам нужна. Free — бесплатная версия. Pro — платная и имеет дополнительные стили и наборы иконок.
Начертание шрифта, которое мы будем использовать в своем проекте.
Что мы будем использовать. Webfont — иконочный шрифт. SVG — иконки в формате .svg
Сгенерированный код для подключения Font Awesome с помощью CDN.

Чтобы не переходить на сайт, я размещу код со стандартными настройками здесь.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">

Подключить Font Awesome с помощью CDN очень просто. Ведь вам нужно разместить всего лишь одну строчку кода в свой проект и все будет работать. Файлы будут храниться на сервере разработчиков. Но я предпочитаю хранить все на своем хостинге, так как я точно могу быть уверен, что все будет работать корректно и никакие изменения и обновления со стороны разработчика шрифта не затронут мой проект.

Подключение Font Awesome 5 с хранением файлов на своем хостинге (CSS)

Для начала нужно скачать файлы Font Awesome и разместить их на свой хостинг. Для этого переходим по этой ссылке https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself или скачиваем по прямой ссылке.

После скачивания получаем архив с файлами, как на скриншоте №2:

Скриншот №2

Для работы иконочного шрифта необходимы только папки выделенные красным. И то в паке /CSS нам нужен только один файл css/all.min.css (Смотрите скриншот №3)

Скриншот №3

Файл all.min.css хранит все стили шрифта Font Awesome, я использую именно этот файл. На это есть много причин связанные с моим личным удобством. Вы же можете использовать тот файл, стили которого вы будете использовать. Например, если вы хотите использовать только бесплатный иконочный шрифт, достаточно подключить файл fontawesome.min.css.

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

Переносим папку webfont и файл all.min.css на свой хостинг.

Очень важно! Папка webfont нужно располагать на директорию выше чем файл all.min.css, иначе шрифт Font Awesome не подключится, так как в стилях прописан именно такой путь для файлов со шрифтами. Если такой способ противоречит структуре вашего проекта, тогда просто пропишите в файле all.min.css новый путь до папки webfont.

У меня это выглядит так:

Скриншот №4

В папке fontawesome хранится один файл all.min.css

Теперь нам нужно подключить Font Awesome к своему сайту, для этого подключаем стили all.min.css, так как вы обычно подключаете файлы со стилями. Этот процесс я описывать не буду, так как он имеет огромное количество вариантов и каждый делает это по-своему. Но если вы новичок и не знаете, как подключать файлы со стилями, то Google вам в помощь. При возникновении трудностей пишите в комментариях, и я обязательно вам помогу.

Как использовать Font Awesome

В этой части статьи мы разберем как правильно использовать Font Awesome в веб-разработке или дизайне на примере Photoshop.

Как использовать Font Awesome в HTML

Это самый простой способ использования иконочного шрифта. Достаточно выбрать из каталога иконок Font Awesome нужную иконку и вставить ее код в нужное место вашего html документа. На скриншоте № 5 под цифрой 1 изображено место откуда можно узнать код иконки.

Скриншот №5

Как использовать Font Awesome в псевдоэлементах after и before CSS. Параметр content.

Чтобы использовать иконочный шрифт для его отображение в псевдоэлементах after или before, нужно использовать Unicode иконки. Который можно взять на странице с нужной иконкой (на скриншоте №5 цифра 2)

Теперь пишем стили css для элемента before или after:

div::after{
        display: block;
        content: '\f17b';
        font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
        font-weight: 900;
        width: 100px;
        height: 100px;
        }

Разберем главные моменты в коде.

3. В свойстве content указываем Unicode.

4. Обязательно задаем семейства шрифта. Обратите внимание у Font Awesome 5 используется 2 шрифта «Font Awesome 5 Brands» и «Font Awesome 5 Free». В избежании ошибки указывайте оба.

5. Font-weight — обязательно нужно указывать 900, иначе иконки будут отображаться в виде квадратиков. Другая толщина доступна только в PRO версии.

Как использовать шрифт Font Awesome в Photoshop

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

Смотрите на скриншоте №6:

Скриншот №6

После установки можно использовать Font Awesome в фотошопе, для этого мы копируем необходимую нам иконку с каталога (цифра 3 на скриншоте №5) и вставляем в photoshop как текст. Незабываем выбрать в настройках семейство шрифта Font Awesome.

Скриншот №7

Стилизация иконок FontAwesome

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

Вот и вся информация, которая необходима для использования иконок от Font Awesome, как для разработки сайтов, так и для проектирования дизайн-макетов в Photoshop. Надеюсь статья вам понравилась и решила все ваши проблемы. А если нет, посмотрите мое видео на эту тему, там я показываю все на примере.

Если информация оказалась полезной поделитесь ей с друзьями в социальных сетях, а так же подписывайтесь на обновление блога и youtube канал, чтобы не пропустить полезные материалы.

Украшаем дизайн сайта с помощью иконок Font Awesome — Константин Хмелев

Здравствуйте, друзья.

Сегодня новая статья из рубрики «Дизайн».

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

Тоже самое касается и маленьких иконок возле количества комментариев, даты, количества просмотров.

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

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

СодержаниеПоказать

Как подключить иконки Font Awesome к сайту

Существует 2 способа подключения:

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

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

Вариант 1

Заходим на [urlspan]официальный сайт Font Awesome[/urlspan] и берем строку кода подключения загрузки файла с облачного хранилища. Строка будет в первом пункте страницы, также ее я продублировал ниже.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Вставляем ее на свой сайт между областямитут вставляем. Если у вас сайт на WordPress, то данная область находится в файле Header.php.

На этом подключение закончено. Остается только [urlspan]зайти на эту страницу[/urlspan] и выбрать подходящую иконку. Жмем на понравившуюся иконку и попадаем на страницу с вариантами различных размеров иконок, чтобы вы понимали, как она будет выглядеть при разных размерах шрифта. Также там будет и код, который будет выводить иконку.

Этот код вставляем в любое место, где хотим отобразить иконку.

[box]

Замечу, что такой метод вставки не работает в названии виджетов WordPress. Если просто вставить перед фразой код иконки, то он будет пропадать оттуда. Поэтому нужно использовать другой метод с помощью Jquery, о котором я сделаю следующую статью Там тоже все очень просто.

[/box]

Необходимо размещать код в файлах шаблона или в каких-то текстовых элементах. Например, в текстовом виджете в самом поле ввода содержимого, иконки работают. Таким образом у меня работает виджет популярных и обсуждаемых записей. Остальные же иконки прописаны в верстке, как самого шаблона, так и плагинов.

Вариант 2

Скачиваем папку с файлами [urlspan]отсюда[/urlspan].

Далее заходим в скачанный архив и углубляемся внутрь пока не будут видны все папки библиотеки.

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

Далее нужно подключить файл font-awesome.min.css, лежащий в папке CSS. Используем следующую строку, в ней только пропишите свой путь (домен и название темы). Размещаем ее по аналогии, как и с первым вариантом — в шапку сайта.

<link rel="stylesheet" href="http://ваш домен/wp-content/themes/название папки с темой/css/font-awesome.min.css">

Далее аналогичным образом ищем понравившуюся иконку и вставляем ее в нужные места шаблона.

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

Изменение цвета иконок

Если же вам необходимо изменить цвет иконок, то это также вполне реально и не составит труда. У каждой иконки имеет общий класс (.fa) и индивидуальный класс с названием иконки. На примере выше с иконкой карандаша индивидуальный класс следующий:

fa-pencil-square-o

Если хотите данной иконке задать конкретный цвет, тогда добавляем данный класс в свой файл стилей и внутри него пишем цвет, а также размер, стиль шрифта и дргие стили по вашему желанию. Нюанс заключается в том, что иконка выводится в псевдоэлементе before, поэтому именно ему и нужно прописывать стили. Например:

.fa-pencil-square-o:before{
color: #111; /*черный цвет*/
font-size:12px /*размер иконки 12 пикселей в ширину и высоту*/
}

Аналогично можно прописать оформление и для всех иконок Font Awesome, если нет нужды делать каждую индивидуально. Например, получится:

.fa:before{
color: #111; /*черный цвет*/
font-size:12px /*размер иконки 12 пикселей в ширину и высоту*/
}

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

На этом сей материал я заканчиваю. Надеюсь, что он вам будет полезен. Тема актуальная. Лично я теперь использую такие иконки на всех сайтах. Стараюсь избавляться от всех картинок, и делать все максимально чисто и просто.

А вы используете иконки и слышали ли о них? Если нужна будет помощь, то обязательно пишите свои вопросы в комментариях.

Пока.

С уважением, Константин Хмелев!

Как подключить шрифт Awesome у себя на сайте — Технический блокнот

Awesome — это набор векторных иконок. А точнее шрифт состоящий не из букв и цифр, а из картинок. И эти изображения, так как они по сути являются шрифтом, можно оформлять (модифицировать) с помощью CSS стилей, устанавливать для них цвет, размер, тень и многое другое. Что согласитесь очень удобно.

В настоящий момент шрифт Awesome содержит более 1500 бесплатных иконок!

Как установить шрифт Awesome на сайт

Для того чтобы воспользоваться иконками шрифта Awesome нужно скачать набор шрифтов и стилей себе на сайт. Для этого переходим на официальный сайт — https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself и скачиваем архив, нажав на кнопку [Font Awesome Free for the Web].

Далее вам необходимо распаковать архив и скопировать к себе на сайт содержимое папок /css и /webfonts, например в директорию /css/awesome.

Теперь подключите в секции <head> вашего сайта стили Awesome:

<link rel="stylesheet" href="/css/awesome/css/all.css" />

Альтернативный способ подключения шрифтов Awesome

Можно ничего не копировать к себе на сайт, а загружать все данные из CDN сети. Для этого нужно добавить следующий код в раздел <head>:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">

Плюсом такого решения будет более быстрая скорость работы сайта, так как данные будут параллельно грузиться с разных серверов (сайт — с вашего хостинга, а шрифты — из сети Awesome), кроме того шрифты уже могут быть закешированы браузером, если вы когда-то посещали сайты на которых они используются.

Минус — это невозможность использования на автономных сайтах (без доступа к интернету) и зависимость от CDN сети Awesome. Поэтому я, как правило, использую первый способ.

Как использовать шрифты awesome на сайте

После того как вы подключили шрифты у себя на сайте вы можете добавить иконки Awesome на веб-страницу двумя способами:

задать соответствующие классы для элементов  и ;
добавить к нужному элементу с помощью псевдоэлементов :before, :after и соответствующего значения свойства content.

Пример использования шрифтов Awesome

Для одного из сайтов я использовал следующий код (для элемента  использованы стили шрифта awesome версии 4.7.0):


<div>
    <div><i></i><br>Поставка вычислительной техники и ПО</div>
    <div><i></i><br>Построение систем охранного телевидения и видеонаблюдения</div>
    <div><i></i><br>Разработка систем контроля и управления доступом</div>
    <div><i></i><br>Проектирование и монтаж ЛВС/СКС и телефонии</div>
</div>

В браузере результат выглядит так:

Где посмотреть иконки Awesome для сайта

Если буквы и цифры у вас нанесены на клавиши клавиатуры и их использование не вызывает затруднений, то вот по шрифтам awesome есть вопрос: а как узнать соответствие кода иконки и его графического изображения. Например, какой использовать HTML код для отображения иконки Android?

Чтобы выяснить это посетите официальный сайт — https://fontawesome.com/icons?d=gallery&m=free

Например, изображению Android соответствует следующий код:

<i></i>

На экране он выглядит так:

Какую версию шрифтов Awesome лучше использовать на сайте

Шрифт Awesome постоянно развивается, в него регулярно добавляются новые иконки и варианты их оформления. На момент написания статьи актуальна 5 версия шрифта. Но вы спокойно можете использовать у себя на сайте предыдущие редакции 4.7.0 или даже 3.2.1. Для этого посетите страницы https://fontawesome.com/v4.7.0/ и https://fontawesome.com/v3.2.1/ соответственно.

Обратите внимание, что при скачивании предыдущей версии шрифта вас будут постоянно склонять к использованию новой версии 🙂

P.S.

На своих сайтах я обычно использую шрифт awesome версии 4.7.0. Причина в том, что он занимает меньше места. Правда в этой версии заметно скромнее набор иконок, в частности отсутствует упомянутая выше иконка Android, которая появилась лишь в версии 5.0.

Благодарности

При написании статьи были использованы следующие источники:

https://html5book.ru/shrift-awesome/

Иконочный шрифт Font Awesome

Дорогие читатели, приветствую Вас! Рассказать о шрифте Font Awesome я планировал достаточно давно, в своих проектах активно его применяю и сегодня приведу несколько аргументов в его пользу.

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

Раньше для снижения числа запросов я объединял графические элементы дизайна в CSS-спрайты, такое решение для оптимизации скорости загрузки сайта актуально по сей день. Однако проблема масштабирования таким образом не решается и при увеличении изображений они теряют привлекательный внешний вид.

Иконочный шрифт Font Awesome содержит огромный набор векторных иконок, которые отлично масштабируются и превосходно выглядят на экранах высокого разрешения! На webliberty.ru они используются повсеместно: в форме поиска, в списке рубрик, возле даты публикации статьи, а также в кнопках социальных сетей и других элементах оформления.

Преимущества и недостатки иконочных шрифтов

Традиционные изображения с давних пор хорошо себя зарекомендовали в качестве графических элементов оформления сайта, в современную эпоху их постепенно вытесняют новые возможности CSS3, SVG и шрифты с иконками.

С чем связана их популярность? Решающую роль сыграли гибкость настройки, простота установки и использования в проекте. Основные преимущества:

В коллекции более 500 бесплатных векторных иконок для сайта.
Иконки масштабируются до любого размера без потери качества.
Стилизация с помощью CSS — размер шрифта, цвет и другие свойства.
Не требуется включенная поддержка JavaScript в браузере.
Кроссбраузерность (IE7 и выше), поддержка мобильных браузеров.

Наряду с преимуществами стоит упомянуть о недостатках, они, к сожалению, тоже есть, но довольно незначительные:

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

Как подключить шрифт Font Awesome

Первый и самый простой способ подключить шрифт — загрузить его с внешнего CDN, вставляя в секцию <head> следующую строку:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Второй способ заключается в ручной установке шрифта Font Awesome на свой хостинг. Загрузите архив с официального сайта, распакуйте и сохраните папки css и fonts на сервере в каталог font-awesome. Подключается аналогично, меняя лишь путь к файлу:

<link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">

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

Для того чтобы вставить иконку на страницу поступаем следующим образом: находим на сайте нужную иконку и копируем ее код, затем вставляем в HTML-режиме:

<i></i>

На официальном сайте проекта есть документация и дополнительные примеры использования.

Иногда элементы сайта динамически формируются, например, PHP функцией, и нет прямой возможности редактировать HTML, тогда применяют псевдоклассы в селекторах CSS.

Я покажу как это сделать на примере виджета категорий WordPress. Посмотрите на фрагмент исходного кода:

<div>Рубрики блога</div>
<ul>
	<li>
		<a href="/category/wordpress/">WordPress</a>
	</li>
</ul>

Для класса cat-item я добавил псевдоэлемент before таким образом получилось:

.cat-item:before {
	content: "\f07c";
	font-family: FontAwesome;
	color:#393;
	padding-right:10px
}

Свойство content генерирует иконку из hex-кода таблицы символов Unicode, который можно узнать на странице с иконкой:

Unicode \f07c как раз и соответствует hex-коду нужной иконки, который в дальнейшем применяем для стилизации собственных классов.

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

Bootstrap 3 — Иконки Font Awesome

Установка шрифта

Чтобы подключить шрифт Font Awesome на свой веб-сайт вы можете воспользоваться двумя способами:

Самый простой способ – это с помощью Bootstrap CDN. Для этого необходимо добавить одну строчку кода в раздел заголовка сайта. Ни чего загружать и устанавливать не надо.
```

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
```

Второй способ заключается в скачивании шрифта Awesome со страницы проекта, его распаковки в каталог сайта и подключения CSS файла «font-awesome.min.css».
```

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
```
Готовую сборку с платформой Twitter Bootstrap 3 можете скачать по ссылке.

Использование иконок шрифта Awesome

Вы можете поместить иконки Awesome практически в любом месте, используя CSS префикс fa и имя иконки, которые расположены на сайте. Шрифт Awesome предназначен для использования со строчными элементами HTML (можно использовать тег для краткости, но использование тега семантически более правильно).


<i></i> fa-camera-retro

Выше приведенный код будет выглядеть примерно так:

fa-camera-retro

Создание иконок увеличенного размера

Для увеличения размера иконок Вы можете воспользоваться классами fa-lg (увеличение на 33%), fa-2x, fa-3x, fa-4x, или fa-5x.


<i></i> fa-lg
<i></i> fa-2x
<i></i> fa-3x
<i></i> fa-4x
<i></i> fa-5x

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

Создание иконок с фиксированной шириной

Иконки с фиксированной шириной очень полезны при создании навигационных меню или различных списков. Чтобы создать такие иконки, используйте класс fa-fw.


<div>
  <a href="#"><i></i>  Главная</a>
  <a href="#"><i></i>  Книги</a>
  <a href="#"><i></i>  Статьи</a>
  <a href="#"><i></i>  Параметры</a>
</div>

Иконки для маркированных списков

С помощью классов fa-ul и fa-li Вы можете заменить стандартные маркеры в неупорядоченных списках на другие иконки.


<ul>
  <li><i></i>Иконки Awesome</li>
  <li><i></i>могут использоваться</li>
  <li><i></i>как маркеры</li>
  <li><i></i>неупорядоченных списков</li>
</ul>

Иконки Awesome

могут использоваться

как маркеры

неупорядоченных списков

Создание «вытянутых» иконок

Для создания «вытянутых» кавычек или иконок статей используйте классы fa-border и pull-right или pull-left.


<i></i>
...Креативность — это просто создание связей между вещами. Когда творческих людей спрашивают, как они что-то сделали, они чувствуют себя немного виноватыми, потому что они не сделали ничего на самом деле, а просто заметили. Это становится им понятно со временем. Они смогли связать разные кусочки своего опыта и синтезировать что-то новое. Это происходит потому, что они пережили и увидели больше, чем другие, или потому, что они больше об этом размышляют.

…Креативность — это просто создание связей между вещами. Когда творческих людей спрашивают, как они что-то сделали, они чувствуют себя немного виноватыми, потому что они не сделали ничего на самом деле, а просто заметили. Это становится им понятно со временем. Они смогли связать разные кусочки своего опыта и синтезировать что-то новое. Это происходит потому, что они пережили и увидели больше, чем другие, или потому, что они больше об этом размышляют.

Создание вращающихся иконок

Для создания вращающейся иконки используйте класс fa-spin.


<button type="button"><i></i></button>
<button type="button"><i></i></button>
<button type="button"><i></i></button>
<button type="button"><i></i></button>

Создание повернутых и зеркально отраженных иконок

Чтобы повернуть и зеркально отразить иконки, используйте следующие классы fa-rotate-* и fa-flip-*.


<i></i> иконка<br>
<i></i> иконка, повернутая на 90 градусов по часовой стрелки<br>
<i></i> иконка, повернутая на 180 градусов по часовой стрелки<br>
<i></i> иконка, повернутая на 270 градусов по часовой стрелки<br>
<i></i> иконка,отраженная по горизонтали<br>
<i></i> иконка, отраженная по вертикали

иконка
иконка, повернутая на 90 градусов по часовой стрелки
иконка, повернутая на 180 градусов по часовой стрелки
иконка, повернутая на 270 градусов по часовой стрелки
иконка,отраженная по горизонтали
иконка, отраженная по вертикали

Иконки, наложенные друг на друга

Чтобы наложить несколько иконок друг на друга, используйте класс «fa-stack» на родительском элементе, класс «fa-stack-1x» для иконки, который расположен на переднем плане и класс «fa-stack-2x» для иконки, расположенной на заднем плане. Класс «fa-inverse» может использоваться для инвертирования цвета иконки.


<span>
  <i></i>
  <i></i>
</span>
иконка "Twitter" на иконке "квадрата"<br>
<span>
  <i></i>
  <i></i>
</span>
иконка "флага" на иконке "круга"<br>
<span>
  <i></i>
  <i></i>
</span>
иконка "терминала" на иконке "квадрата"<br>
<span>
  <i></i>
  <i></i>
</span>
иконка "запрещено" на иконке "камеры"

иконка «Twitter» на иконке «квадрата»

иконка «флага» на иконке «круга»

иконка «терминала» на иконке «квадрата»

иконка «запрещено» на иконке «камеры»

Как добавить шрифт-awesome в проект Angular 2 + CLI

ОБНОВЛЕНИЕ Февраль 2020:

пакет fortawesome теперь поддерживает ng add , но он доступен только для angular 9 :

ng add @fortawesome/angular-fontawesome

UPDATE 8 октября 2019 года:

Вы можете использовать новый пакет https://www.npmjs.com/package/@fortawesome/angular-fontawesome

npm install @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

Добавить FontAwesomeModule к импорту в src/app/app.module.ts :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
@NgModule({
  imports: [
    BrowserModule,
    FontAwesomeModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Привяжите значок к свойству в вашем компоненте src/app/app.component.ts :

import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  faCoffee = faCoffee;
}

Используйте значок в шаблоне src/app/app.component.html :

<fa-icon [icon]="faCoffee"></fa-icon>

ОРИГИНАЛЬНЫЙ ОТВЕТ:

Вариант 1:

Вы можете использовать модуль angular-font-awesome npm

npm install --save font-awesome angular-font-awesome

Импорт модуля:

...
//
import { AngularFontAwesomeModule } from 'angular-font-awesome';
@NgModule({
  //...
  imports: [
    //...
    AngularFontAwesomeModule
  ],
  //...
})
export class AppModule { }

Если вы используете Angular CLI, добавьте шрифт-awesome CSS в стили внутри angular-cli.json

"styles": [
    "styles.css",
    "../node_modules/font-awesome/css/font-awesome.css"
],

NOTE: При использовании препроцессора SCSS просто измените css для scss

Пример Использования:

<fa name="cog" animation="spin"></fa>

Вариант 2:

Теперь есть официальная история для этого

Установите библиотеку font-awesome и добавьте зависимость в package.json

npm install --save font-awesome

С использованием CSS

Чтобы добавить значки Font Awesome CSS в ваше приложение…

// in .angular-cli.json

"styles": [
  "styles.css",
  "../node_modules/font-awesome/css/font-awesome.css"
]

Использование SASS

Создайте пустой файл _variables.scss в src/ .

Добавить в _variables.scss следующее :

$fa-font-path : '../node_modules/font-awesome/fonts';
В styles.scss добавить следующее:

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';

Тест

Запустите ng serve, чтобы запустить приложение в режиме разработки, и перейдите к http://localhost:4200.

Чтобы убедиться, что шрифт Awesome настроен правильно, измените src/app/app.component.html на следующий…

<h2>
  {{title}} <i></i>
</h2>

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

Также есть связанный с этим вопрос Angular CLI выводит файлы шрифтов-awesome font в корень dist , так как по умолчанию angular cli выводит шрифты в корень dist , что, кстати, вообще не является проблемой.

Font Awesome — Школа MODX

Более 400 маштабируемых векторных иконок, к которым можно применять стили CSS для изменения цвета, тени, размера и т.д.

Для подключения иконок не требуется JavaScript.

Подходят для дисплеев с высоким разрешением.

Изначально разработано для Bootstrap но отлично работает со всеми инфраструктурами.

Подключение. Первый способ

1. Вставьте следующий код в <head> в вашего сайта:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

2. Проверьте примеры работы, для того чтобы начать пользоваться Font Awesome.

Второй способ

1. Скачайте архив и поместите папку с файлами на сервере.

2. Вставьте следующий код в <head> в вашего сайта (измените указанный путь, если это потребуется):

<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">

3. Проверьте примеры работы, для того чтобы начать пользоваться Font Awesome.

Примеры

Основные иконки

Вы можете разместить иконки где угодно, используя CSS-префикс fa и имя иконки. Font Awesome предназначен для использования со встроенными элементами (нам нравится тег  из-за краткости, но с тегом  код семантически более правильный).

fa-camera-retro

<i></i> fa-camera-retro

Если вы увеличите размер шрифта, значок станет больше. Тоже самое касается всех наследуемых свойств CSS (цвет, тени и т.д.).

Крупные иконки

Для увеличения размеров иконок относительно контейнера используйте классыfa-lg (33%), fa-2x, fa-3x, fa-4x или fa-5x.

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

<i></i> fa-lg
<i></i> fa-2x
<i></i> fa-3x
<i></i> fa-4x
<i></i> fa-5x

Если иконки обрежутся сверху или снизу, проверьте достаточно ли line-height.

Иконки с фиксированной шириной

Используйте fa-fw для того чтобы настроить иконки по фиксированной ширине.

<div>
<a href="#"><i></i> Home</a>
<a href="#"><i></i> Library</a>
<a href="#"><i></i> Applications</a>
<a href="#"><i></i> Settings</a>
</div>

Списки иконок

Используя fa-ul и fa-li легко заменить маркеры списков.

Списки иконок

могут использоваться

как маркеры

в списках

<ul>
<li><i></i>Списки иконок</li>
<li><i></i>могут использоваться</li>
<li><i></i>как маркеры</li>
<li><i></i>в списках</li>
</ul>

Границы и выравнивание иконок

Используйте fa-border и pull-right или pull-left для выравнивания иконок в статьях или цитатах.

…tomorrow we will run faster, stretch out our arms farther… And then one fine morning—
So we beat on, boats against the current, borne back ceaselessly into the past.

<i></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.

Вращение иконок

Используйте fa-spin класс для вращения иконок. Хорошо работает с fa-spinner, fa-refresh и fa-cog.

<i></i>
<i></i>
<i></i>
<i></i>

CSS3 анимация не поддерживается в IE8 — IE9.

Повороты иконок

Для произвольного поворота иконок используйте классы fa-rotate-* и fa-flip-*.

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

<i></i> normal<br>
<i></i> fa-rotate-90<br>
<i></i> fa-rotate-180<br>
<i></i> fa-rotate-270<br>
<i></i> fa-flip-horizontal<br>
<i></i> icon-flip-vertical

Наложение иконок

Наложить несколько иконок друг на друга можно задав родителю класс fa-stack, а вложенным иконкам fa-stack-1x для меньшей иконки и fa-stack-2x для большей иконки. fa-inverse может использоваться в качестве альтернативного цвета иконки.

fa-twitter on fa-square-o

fa-flag on fa-circle

fa-terminal on fa-square

fa-ban on fa-camera

<span>
<i></i>
<i></i>
</span>
fa-twitter on fa-square-o<br>
<span>
<i></i>
<i></i>
</span>
fa-flag on fa-circle<br>
<span>
<i></i>
<i></i>
</span>
fa-terminal on fa-square<br>
<span>
<i></i>
<i></i>
</span>
fa-ban on fa-camera

Начните работу с Font Awesome

Настройка Font Awesome может быть такой же простой, как добавление двух строк кода на ваш сайт, или вы можете быть профессионалом и
настройте МЕНЬШЕЕ самостоятельно! Font Awesome прекрасно работает даже с
Bootstrap!

Добавьте на свой сайт Font Awesome + Bootstrap с помощью двух строк кода. Вам даже не нужно ничего скачивать или устанавливать!

Вставьте следующий код в раздел HTML-кода вашего сайта.

Хотите использовать Font Awesome без Bootstrap? Только не включайте первую строку.
Похвалите себя за свои масштабируемые векторные иконки на веб-сайте
решение дзюдо в двух строчках кода.
Ознакомьтесь с примерами, чтобы начать использовать Font Awesome!

Используйте этот метод, чтобы получить CSS Font Awesome по умолчанию с CSS Bootstrap по умолчанию.

Скопируйте каталог font-awesome в свой проект.
В вашего html укажите местоположение вашего font-awesome.min.css.
Ознакомьтесь с примерами, чтобы начать использовать Font Awesome!

Используйте этот метод для настройки Font Awesome и Bootstrap 2.3.2 с помощью LESS.

Скопируйте каталог font-awesome в свой проект.
Откройте файл bootstrap / bootstrap.less вашего проекта и замените
с
@import "путь / к / font-awesome / less / font-awesome.less";
Откройте файл font-awesome / variables вашего проекта.less и отредактируйте переменную @FontAwesomePath , чтобы она указывала на каталог шрифтов.
@FontAwesomePath: "../font";
Путь к шрифту является относительным от вашего скомпилированного каталога CSS.
Перекомпилируйте LESS, если используете статический компилятор. В противном случае все будет в порядке.
Ознакомьтесь с примерами, чтобы начать использовать Font Awesome!

Font Awesome работает без Bootstrap.

Скопируйте каталог font-awesome в свой проект.
Следуйте приведенным выше инструкциям и пропустите части Bootstrap.
Откройте файл font-awesome.less или font-awesome.min.css своего проекта и отредактируйте расположение шрифта, чтобы он указывал на каталог шрифтов (см. Примеры выше).
Ознакомьтесь с примерами, чтобы начать использовать Font Awesome!

Font Awesome поддерживает IE7. Если вам это нужно, примите мои соболезнования.

Get Font Awesome корректно работает в современном браузере.
Скопируйте font-awesome-ie7.min.css в свой проект.
В вашего html укажите местоположение вашего font-awesome-ie7.min.css.
Жалуйтесь тому, кто решил, что вашему проекту нужна поддержка IE7.

Как использовать Font Awesome v5.7.2 с HTML

Font Awesome — один из самых популярных способов добавления значков на ваш сайт. Но что, если вы добавите CDN к элементу своей страницы и все, что вы увидите, — это черные прямоугольники?

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

Добавьте ссылку в шапку

Представьте, что у вас есть следующий HTML:

Как и другие сети CDN, вам нужно добавить элемент к . Для Font Awesome 5.7.2 это будет выглядеть примерно так:

Онлайн против локального

Если вы запустите следующий код в веб-редакторе, таком как CodePen или CodeSandbox, следующий код правильно отображает значки:

Но если вы попытаетесь открыть страницу локально в браузере, вы все равно увидите черные прямоугольники вместо значков:

Еще раз взгляните на href в элемент выше. Вы видите это?

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

Чтобы все работало онлайн и локально, обязательно добавьте схему URL (HTTP или лучше HTTPS) в href :

Что здесь происходит?

Когда вы опускаете схему URL ( href = "// use.fontawesome ..." ), браузер использует ту же схему URL, с которой была загружена страница.

Итак, если вы запускаете страницу локально, запустив файл HTML в браузере, href предполагает, что Font Awesome CSS также является файлом, который также сохраняется локально (файл : ).

Просто убедитесь, что атрибуты href для ваших элементов указывают на полный URL-адрес, включая схему URL-адресов, и все готово.

Использование Font Awesome Icons на вашем веб-сайте

Подпишитесь на нашу рассылку новостей.

Добавление значков к содержанию вашего сайта обеспечивает визуальную точку фокусировки, которая направляет пользователя к определенному разделу и сопутствующему контенту.

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

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

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

Шаг 1. Добавьте необходимые включения на свою веб-страницу

Для начала вам нужно убедиться, что на ваш сайт включены следующие ресурсы Font Awesome.Никакой загрузки или сложных скриптов не требуется — всего одна ссылка на Font Awesome CSS поможет вам начать работу.

Шаг 2 — Добавьте выбранный значок

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

Каждый значок использует тег и требует двух классов. Первый, «fa», идентифицирует элемент как значок Font Awesome, а второй, «fa-rss», определяет конкретный значок для загрузки. Чтобы использовать разные значки, просто найдите соответствующий класс CSS.

Шаг 3. Используйте встроенные настройки

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

Шаг 4. Добавьте уникальные настройки

Поскольку эти значки полностью основаны на CSS, вы можете добавлять свои собственные стили и классы, чтобы полностью заставить значок работать в вашем проекте веб-дизайна. Например, вы можете сделать значок «Фильм» красным.

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

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

FortAwesome / font-awesome-sass: гем Sass Font-Awesome для использования в проектах Ruby / Rails

‘font-awesome-sass’ — это версия FontAwesome на основе Sass для ваших проектов Ruby, которая прекрасно работает с
Ruby on Rails, Compass, Sprockets и т. Д.

Реорганизован для поддержки большего количества сред Ruby с кодом и документацией, скромно используемыми из отличных
проект bootstrap-sass от команды Bootstrap

Критические изменения

В обновлении Font Awesome 5.x внесены некоторые критические изменения, которые повлияют на использование вами этого драгоценного камня. Некоторые из изменений включают:

Изменение названия значка
Новые иконки
Использование стиля иконок ( сплошных , обычных или марок )

Более подробную информацию об этих изменениях можно найти в нашем руководстве по началу работы, в руководстве по использованию и в руководстве по обновлению с версии 4.

Установка

См. Соответствующее руководство для выбранной вами среды:

а. Рубин на рельсах

В вашем Gemfile укажите:

 драгоценный камень 'font-awesome-sass', '~> 5.15.1'

А затем выполните:

Импортируйте стили FontAwesome в app / assets / stylesheets / application.css.scss . Файл font-awesome-sprockets
включает вспомогательные функции Sass для ресурсов звездочек, используемые для поиска правильного пути к файлу шрифта.

 @import "font-awesome-sprockets";
@import "потрясающий шрифт";

Если app / assets / stylesheets / application.css.scss не существует, переименуйте app / assets / stylesheets / application.css и добавьте операторы @import под * = требуется операторов, но за пределами блок комментариев.

Использование Rails Helper

В Font Awesome 5.x теперь вам нужно выбрать стиль значка, который вы хотите использовать. Font Awesome 5.x имеет 3 стиля:

цельный ( fas )
обычный ( дальний )
брендов ( фаб )

На ваш взгляд:

 значок ('fas', 'flag')
# =>

 icon ('далеко', 'адресная книга', класс: 'сильный')
# =>

Значок

 ('fab', 'font-awesome', 'Font Awesome', id: 'my-icon', class: 'strong')
# =>   Font Awesome

Примечание: помощник по значку может принимать хэш параметров, который будет передан помощнику content_tag

г.Компас без направляющих

Установите драгоценный камень

 gem установить font-awesome-sass

Если у вас уже есть проект Compass:

 # config.rb:
требуется 'font-awesome-sass'

Импорт стилей FontAwesome

 @import "font-awesome-compass";
@import "потрясающий шрифт";

Обновление с FontAwesome :: Sass 4.x

Добавьте стиль значка, который вы хотите использовать ( fas , far , fab ) к существующим значкам:

4.x Синтаксис

5.x Синтаксис (значок GitHub существует в стиле Brands)

Как использовать Fontawesome — Сообщество разработчиков

Я почти уверен, что все где-то видели значки Fontawesome, они так широко используются и даже включены в Bootstrap.

Сегодня мы рассмотрим, как можно использовать Fontawesome на своем веб-сайте!

Мы собираемся рассмотреть Fontawesome 5, он поставляется с версией PRO и БЕСПЛАТНОЙ версией, в этой статье мы будем рассматривать только БЕСПЛАТНУЮ версию.