Шрифт awesome: Font Awesome — иконочный шрифт и CSS-инструментарий

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> для краткости, но использование тега <span> семантически более правильно).

<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» на иконке «квадрата»




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




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




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

Font Awesome. Иконочный шрифт и CSS-инструментарий

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

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

Где взять бесплатный шрифт Font Awesome

Много людей ищут шрифт Font Awesome по понятным им запросам, например «fa fa icon» или «fa icons» или просто «fa fa». И конечно они находят официальный сайт fontawesome.io и для тех, кому английский язык не является родным или понятным, есть очень качественна русская версия сайта поддержки этого шрифта fontawesome.ru. (Обе ссылки откроются в новой вкладке.)

Что же такое шрифт Font Awesome?

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

Почему стоит задуматься над тем, чтобы использовать шрифт Font Awesome?

Один шрифт, уже содержит 675 иконок

Единой коллекцией Font Awesome является графическим языком интернет-пространства.

Нет необходимости в JavaScript

Мало проблем с совместимостью, так как для Font Awesome не требуется JavaScript.

Управление через CSS

Легко настроить цвет иконок, размер, тени и все остальное, что возможно с помощью CSS.

Совместимость с фреймворками

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

Бесплатно, как воздух

Font Awesome полностью бесплатен для коммерческого использования. И это написано в лицензии.

Доступность

Font Awesome любит экранные читалки и помогает сделать доступными ваши иконки в интернете.

Поддержка Retina-дисплеев

Иконки Font Awesome векторные, а это значит, что они великолепны на экранах высокого разрешения.

Бесконечная масштабируемость

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

Совместимость с настольными компьютерами

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

Использовать шрифт Font Awesome

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

Заберите ссылку на статью к себе, чтобы потом легко её найти 😉

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

Font Awesome (Cart icon)

Посмотреть обсуждение на форуме CS-Cart

Font Awesome — добавляет иконочный шрифт и меняет иконку корзины и профиля, а так же поведение их содержащих блоков

Важно: вы подключаете иконочный шрифт содержащий 675 иконок, это скажется на скорости загрузки вашего сайта (для ускорения включите для своего сервера кеширование в браузере)

В нем доступны следующие возможности:

• Подключается иконочный шрифт Font Awesome
• Более чем 600 новых иконок для вашего магазина
• Нет необходимости в JavaScript
• Управление через CSS
• Бесконечная масштабируемость
• Поддержка Retina-дисплеев
• Совместимость с экранными дикторами
• В панели администратора, иконки легко искать и добавлять непосредственно в редакторе
• Также для Вашего удобства, мы реализовали замены стандартной иконки корзины на один из трех предложенных вариантов

Новые возможности (версия 4.0):

• Отображение контента выпадающего блока, по наведению или по нажатию
• Возможность изменения иконки пользователя
• Превью для выбранных иконок
• Возможность изменить размер и цвет иконок

1. Нажмите иконку флага . Откроется окно с выбором иконок

2. Для поиска иконки вы можете воспользоваться строкой ввода расположенной снизу. Нажмите выбранную иконку и она добавиться в текст

1. Нажмите иконку флага . Откроется окно с выбором иконок

2. Для поиска иконки вы можете воспользоваться строкой ввода расположенной снизу. Нажмите выбранную иконку и она добавиться в текст

1. Воспользуйтесь поиском на сайте Font Awesome

2. Скопируйте HTML код

Таблица значений иконок Font Awesome

Приветствую. Наверное вы уже знаете о таком замечательном инструменте как иконочный шрифт от Font Awesome для сайта.

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

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

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

Я не буду сейчас описывать детально как подключить иконки Awesome на свой сайт с загрузкой всех файлов, так как статья чуточку о другом, как это сделать вы можете найти самостоятельно в интернете, а для того что бы подключить их из ресурса CDNJS вам достаточно на сайт где то над </head> добавить строку:

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

После добавления этой строки вы сможете полностью работать с иконочным шрифтом.

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

По умолчанию шрифт добавляется конкретно на страницу html используя тег <i> к примеру так:

<i aria-hidden=»true»></i>

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

Допустим вы хотите к какому то элементу на сайте впереди него добавить иконку Awesome, ниже наведу пример как это делается:

.element:before {
content: «\f000»;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #000;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 10px;
left: 0;
}

То есть мы добавили :before к нужному нам блоку и добавили шрифт иконок font-family: FontAwesome; со значением самой иконки content: «\f000»; ( ), вот и все в принципе, теперь иконка отобразится впереди указанного блока, все остальные css стили указанные здесь только для форматирования внешнего вида иконки.

И так ниже предоставляю для вас полный список иконок Awesome с указанием значений всех его шрифтов. Вы конечно же можете любое значение посмотреть и самостоятельно в своем подключенном файле font-awesome.min.css но я думаю что будет намного удобнее узнать значение шрифта воспользовавшись предоставленной на нашем сайте таблицей.

Список значков шрифта Awesome и их значений для CSS

fa-glass»\f000″

fa-music»\f001″

fa-search»\f002″

fa-envelope-o»\f003″

fa-heart»\f004″

fa-star»\f005″

fa-star-o»\f006″

fa-user»\f007″

fa-film»\f008″

fa-th-large»\f009″

fa-th»\f00a»

fa-th-list»\f00b»

fa-check»\f00c»

fa-times»\f00d»

fa-search-plus»\f00e»

fa-search-minus»\f010″

fa-power-off»\f011″

fa-signal»\f012″

fa-cog»\f013″

fa-trash-o»\f014″

fa-home»\f015″

fa-file-o»\f016″

fa-clock-o»\f017″

fa-road»\f018″

fa-download»\f019″

fa-arrow-circle-o-down»\f01a»

fa-arrow-circle-o-up»\f01b»

fa-inbox»\f01c»

fa-play-circle-o»\f01d»

fa-repeat»\f01e»

fa-refresh»\f021″

fa-list-alt»\f022″

fa-lock»\f023″

fa-flag»\f024″

fa-headphones»\f025″

fa-volume-off»\f026″

fa-volume-down»\f027″

fa-volume-up»\f028″

fa-qrcode»\f029″

fa-barcode»\f02a»

fa-tag»\f02b»

fa-tags»\f02c»

fa-book»\f02d»

fa-bookmark»\f02e»

fa-print»\f02f»

fa-camera»\f030″

fa-font»\f031″

fa-bold»\f032″

fa-italic»\f033″

fa-text-height»\f034″

fa-text-width»\f035″

fa-align-left»\f036″

fa-align-center»\f037″

fa-align-right»\f038″

fa-align-justify»\f039″

fa-list»\f03a»

fa-outdent»\f03b»

fa-indent»\f03c»

fa-video-camera»\f03d»

fa-picture-o»\f03e»

fa-pencil»\f040″

fa-map-marker»\f041″

fa-adjust»\f042″

fa-tint»\f043″

fa-pencil-square-o»\f044″

fa-share-square-o»\f045″

fa-check-square-o»\f046″

fa-arrows»\f047″

fa-step-backward»\f048″

fa-fast-backward»\f049″

fa-backward»\f04a»

fa-play»\f04b»

fa-pause»\f04c»

fa-stop»\f04d»

fa-forward»\f04e»

fa-fast-forward»\f050″

fa-step-forward»\f051″

fa-eject»\f052″

fa-chevron-left»\f053″

fa-chevron-right»\f054″

fa-plus-circle»\f055″

fa-minus-circle»\f056″

fa-times-circle»\f057″

fa-check-circle»\f058″

fa-question-circle»\f059″

fa-info-circle»\f05a»

fa-crosshairs»\f05b»

fa-times-circle-o»\f05c»

fa-check-circle-o»\f05d»

fa-ban»\f05e»

fa-arrow-left»\f060″

fa-arrow-right»\f061″

fa-arrow-up»\f062″

fa-arrow-down»\f063″

fa-share»\f064″

fa-expand»\f065″

fa-compress»\f066″

fa-plus»\f067″

fa-minus»\f068″

fa-asterisk»\f069″

fa-exclamation-circle»\f06a»

fa-gift»\f06b»

fa-leaf»\f06c»

fa-fire»\f06d»

fa-eye»\f06e»

fa-eye-slash»\f070″

fa-exclamation-triangle»\f071″

fa-plane»\f072″

fa-calendar»\f073″

fa-random»\f074″

fa-comment»\f075″

fa-magnet»\f076″

fa-chevron-up»\f077″

fa-chevron-down»\f078″

fa-retweet»\f079″

fa-shopping-cart»\f07a»

fa-folder»\f07b»

fa-folder-open»\f07c»

fa-arrows-v»\f07d»

fa-arrows-h»\f07e»

fa-bar-chart»\f080″

fa-twitter-square»\f081″

fa-facebook-square»\f082″

fa-camera-retro»\f083″

fa-key»\f084″

fa-cogs»\f085″

fa-comments»\f086″

fa-thumbs-o-up»\f087″

fa-thumbs-o-down»\f088″

fa-star-half»\f089″

fa-heart-o»\f08a»

fa-sign-out»\f08b»

fa-linkedin-square»\f08c»

fa-thumb-tack»\f08d»

fa-external-link»\f08e»

fa-sign-in»\f090″

fa-trophy»\f091″

fa-github-square»\f092″

fa-upload»\f093″

fa-lemon-o»\f094″

fa-phone»\f095″

fa-square-o»\f096″

fa-bookmark-o»\f097″

fa-phone-square»\f098″

fa-twitter»\f099″

fa-facebook»\f09a»

fa-github»\f09b»

fa-unlock»\f09c»

fa-credit-card»\f09d»

fa-rss»\f09e»

fa-hdd-o»\f0a0″

fa-bullhorn»\f0a1″

fa-bell»\f0f3″

fa-certificate»\f0a3″

fa-hand-o-right»\f0a4″

fa-hand-o-left»\f0a5″

fa-hand-o-up»\f0a6″

fa-hand-o-down»\f0a7″

fa-arrow-circle-left»\f0a8″

fa-arrow-circle-right»\f0a9″

fa-arrow-circle-up»\f0aa»

fa-arrow-circle-down»\f0ab»

fa-globe»\f0ac»

fa-wrench»\f0ad»

fa-tasks»\f0ae»

fa-filter»\f0b0″

fa-briefcase»\f0b1″

fa-arrows-alt»\f0b2″

fa-users»\f0c0″

fa-link»\f0c1″

fa-cloud»\f0c2″

fa-flask»\f0c3″

fa-scissors»\f0c4″

fa-files-o»\f0c5″

fa-paperclip»\f0c6″

fa-floppy-o»\f0c7″

fa-square»\f0c8″

fa-bars»\f0c9″

fa-list-ul»\f0ca»

fa-list-ol»\f0cb»

fa-strikethrough»\f0cc»

fa-underline»\f0cd»

fa-table»\f0ce»

fa-magic»\f0d0″

fa-truck»\f0d1″

fa-pinterest»\f0d2″

fa-pinterest-square»\f0d3″

fa-google-plus-square»\f0d4″

fa-google-plus»\f0d5″

fa-money»\f0d6″

fa-caret-down»\f0d7″

fa-caret-up»\f0d8″

fa-caret-left»\f0d9″

fa-caret-right»\f0da»

fa-columns»\f0db»

fa-sort»\f0dc»

fa-sort-desc»\f0dd»

fa-sort-asc»\f0de»

fa-envelope»\f0e0″

fa-linkedin»\f0e1″

fa-undo»\f0e2″

fa-gavel»\f0e3″

fa-tachometer»\f0e4″

fa-comment-o»\f0e5″

fa-comments-o»\f0e6″

fa-bolt»\f0e7″

fa-sitemap»\f0e8″

fa-umbrella»\f0e9″

fa-clipboard»\f0ea»

fa-lightbulb-o»\f0eb»

fa-exchange»\f0ec»

fa-cloud-download»\f0ed»

fa-cloud-upload»\f0ee»

fa-user-md»\f0f0″

fa-stethoscope»\f0f1″

fa-suitcase»\f0f2″

fa-bell-o»\f0a2″

fa-coffee»\f0f4″

fa-cutlery»\f0f5″

fa-file-text-o»\f0f6″

fa-building-o»\f0f7″

fa-hospital-o»\f0f8″

fa-ambulance»\f0f9″

fa-medkit»\f0fa»

fa-fighter-jet»\f0fb»

fa-beer»\f0fc»

fa-h-square»\f0fd»

fa-plus-square»\f0fe»

fa-angle-double-left»\f100″

fa-angle-double-right»\f101″

fa-angle-double-up»\f102″

fa-angle-double-down»\f103″

fa-angle-left»\f104″

fa-angle-right»\f105″

fa-angle-up»\f106″

fa-angle-down»\f107″

fa-desktop»\f108″

fa-laptop»\f109″

fa-tablet»\f10a»

fa-mobile»\f10b»

fa-circle-o»\f10c»

fa-quote-left»\f10d»

fa-quote-right»\f10e»

fa-spinner»\f110″

fa-circle»\f111″

fa-reply»\f112″

fa-github-alt»\f113″

fa-folder-o»\f114″

fa-folder-open-o»\f115″

fa-smile-o»\f118″

fa-frown-o»\f119″

fa-meh-o»\f11a»

fa-gamepad»\f11b»

fa-keyboard-o»\f11c»

fa-flag-o»\f11d»

fa-flag-checkered»\f11e»

fa-terminal»\f120″

fa-code»\f121″

fa-reply-all»\f122″

fa-star-half-o»\f123″

fa-location-arrow»\f124″

fa-crop»\f125″

fa-code-fork»\f126″

fa-chain-broken»\f127″

fa-question»\f128″

fa-info»\f129″

fa-exclamation»\f12a»

fa-superscript»\f12b»

fa-subscript»\f12c»

fa-eraser»\f12d»

fa-puzzle-piece»\f12e»

fa-microphone»\f130″

fa-microphone-slash»\f131″

fa-shield»\f132″

fa-calendar-o»\f133″

fa-fire-extinguisher»\f134″

fa-rocket»\f135″

fa-maxcdn»\f136″

fa-chevron-circle-left»\f137″

fa-chevron-circle-right»\f138″

fa-chevron-circle-up»\f139″

fa-chevron-circle-down»\f13a»

fa-html5″\f13b»

fa-css3″\f13c»

fa-anchor»\f13d»

fa-unlock-alt»\f13e»

fa-bullseye»\f140″

fa-ellipsis-h»\f141″

fa-ellipsis-v»\f142″

fa-rss-square»\f143″

fa-play-circle»\f144″

fa-ticket»\f145″

fa-minus-square»\f146″

fa-minus-square-o»\f147″

fa-level-up»\f148″

fa-level-down»\f149″

fa-check-square»\f14a»

fa-pencil-square»\f14b»

fa-external-link-square»\f14c»

fa-share-square»\f14d»

fa-compass»\f14e»

fa-caret-square-o-down»\f150″

fa-caret-square-o-up»\f151″

fa-caret-square-o-right»\f152″

fa-eur»\f153″

fa-gbp»\f154″

fa-usd»\f155″

fa-inr»\f156″

fa-jpy»\f157″

fa-rub»\f158″

fa-krw»\f159″

fa-btc»\f15a»

fa-file»\f15b»

fa-file-text»\f15c»

fa-sort-alpha-asc»\f15d»

fa-sort-alpha-desc»\f15e»

fa-sort-amount-asc»\f160″

fa-sort-amount-desc»\f161″

fa-sort-numeric-asc»\f162″

fa-sort-numeric-desc»\f163″

fa-thumbs-up»\f164″

fa-thumbs-down»\f165″

fa-youtube-square»\f166″

fa-youtube»\f167″

fa-xing»\f168″

fa-xing-square»\f169″

fa-youtube-play»\f16a»

fa-dropbox»\f16b»

fa-stack-overflow»\f16c»

fa-instagram»\f16d»

fa-flickr»\f16e»

fa-adn»\f170″

fa-bitbucket»\f171″

fa-bitbucket-square»\f172″

fa-tumblr»\f173″

fa-tumblr-square»\f174″

fa-long-arrow-down»\f175″

fa-long-arrow-up»\f176″

fa-long-arrow-left»\f177″

fa-long-arrow-right»\f178″

fa-apple»\f179″

fa-windows»\f17a»

fa-android»\f17b»

fa-linux»\f17c»

fa-dribbble»\f17d»

fa-skype»\f17e»

fa-foursquare»\f180″

fa-trello»\f181″

fa-female»\f182″

fa-male»\f183″

fa-gratipay»\f184″

fa-sun-o»\f185″

fa-moon-o»\f186″

fa-archive»\f187″

fa-bug»\f188″

fa-vk»\f189″

fa-weibo»\f18a»

fa-renren»\f18b»

fa-pagelines»\f18c»

fa-stack-exchange»\f18d»

fa-arrow-circle-o-right»\f18e»

fa-arrow-circle-o-left»\f190″

fa-caret-square-o-left»\f191″

fa-dot-circle-o»\f192″

fa-wheelchair»\f193″

fa-vimeo-square»\f194″

fa-try»\f195″

fa-plus-square-o»\f196″

fa-space-shuttle»\f197″

fa-slack»\f198″

fa-envelope-square»\f199″

fa-wordpress»\f19a»

fa-openid»\f19b»

fa-university»\f19c»

fa-graduation-cap»\f19d»

fa-yahoo»\f19e»

fa-google»\f1a0″

fa-reddit»\f1a1″

fa-reddit-square»\f1a2″

fa-stumbleupon-circle»\f1a3″

fa-stumbleupon»\f1a4″

fa-delicious»\f1a5″

fa-digg»\f1a6″

fa-pied-piper»\f1a7″

fa-pied-piper-alt»\f1a8″

fa-drupal»\f1a9″

fa-joomla»\f1aa»

fa-language»\f1ab»

fa-fax»\f1ac»

fa-building»\f1ad»

fa-child»\f1ae»

fa-paw»\f1b0″

fa-spoon»\f1b1″

fa-cube»\f1b2″

fa-cubes»\f1b3″

fa-behance»\f1b4″

fa-behance-square»\f1b5″

fa-steam»\f1b6″

fa-steam-square»\f1b7″

fa-recycle»\f1b8″

fa-car»\f1b9″

fa-taxi»\f1ba»

fa-tree»\f1bb»

fa-spotify»\f1bc»

fa-deviantart»\f1bd»

fa-soundcloud»\f1be»

fa-database»\f1c0″

fa-file-pdf-o»\f1c1″

fa-file-word-o»\f1c2″

fa-file-excel-o»\f1c3″

fa-file-powerpoint-o»\f1c4″

fa-file-image-o»\f1c5″

fa-file-archive-o»\f1c6″

fa-file-audio-o»\f1c7″

fa-file-video-o»\f1c8″

fa-file-code-o»\f1c9″

fa-vine»\f1ca»

fa-codepen»\f1cb»

fa-jsfiddle»\f1cc»

fa-life-ring»\f1cd»

fa-circle-o-notch»\f1ce»

fa-rebel»\f1d0″

fa-empire»\f1d1″

fa-git-square»\f1d2″

fa-git»\f1d3″

fa-hacker-news»\f1d4″

fa-tencent-weibo»\f1d5″

fa-qq»\f1d6″

fa-weixin»\f1d7″

fa-paper-plane»\f1d8″

fa-paper-plane-o»\f1d9″

fa-history»\f1da»

fa-circle-thin»\f1db»

fa-header»\f1dc»

fa-paragraph»\f1dd»

fa-sliders»\f1de»

fa-share-alt»\f1e0″

fa-share-alt-square»\f1e1″

fa-bomb»\f1e2″

fa-futbol-o»\f1e3″

fa-tty»\f1e4″

fa-binoculars»\f1e5″

fa-plug»\f1e6″

fa-slideshare»\f1e7″

fa-twitch»\f1e8″

fa-yelp»\f1e9″

fa-newspaper-o»\f1ea»

fa-wifi»\f1eb»

fa-calculator»\f1ec»

fa-paypal»\f1ed»

fa-google-wallet»\f1ee»

fa-cc-visa»\f1f0″

fa-cc-mastercard»\f1f1″

fa-cc-discover»\f1f2″

fa-cc-amex»\f1f3″

fa-cc-paypal»\f1f4″

fa-cc-stripe»\f1f5″

fa-bell-slash»\f1f6″

fa-bell-slash-o»\f1f7″

fa-trash»\f1f8″

fa-copyright»\f1f9″

fa-at»\f1fa»

fa-eyedropper»\f1fb»

fa-paint-brush»\f1fc»

fa-birthday-cake»\f1fd»

fa-area-chart»\f1fe»

fa-pie-chart»\f200″

fa-line-chart»\f201″

fa-lastfm»\f202″

fa-lastfm-square»\f203″

fa-toggle-off»\f204″

fa-toggle-on»\f205″

fa-bicycle»\f206″

fa-bus»\f207″

fa-ioxhost»\f208″

fa-angellist»\f209″

fa-cc»\f20a»

fa-ils»\f20b»

fa-meanpath»\f20c»

fa-buysellads»\f20d»

fa-connectdevelop»\f20e»

fa-dashcube»\f210″

fa-forumbee»\f211″

fa-leanpub»\f212″

fa-sellsy»\f213″

fa-shirtsinbulk»\f214″

fa-simplybuilt»\f215″

fa-skyatlas»\f216″

fa-cart-plus»\f217″

fa-cart-arrow-down»\f218″

fa-diamond»\f219″

fa-ship»\f21a»

fa-user-secret»\f21b»

fa-motorcycle»\f21c»

fa-street-view»\f21d»

fa-heartbeat»\f21e»

fa-venus»\f221″

fa-mars»\f222″

fa-mercury»\f223″

fa-transgender»\f224″

fa-transgender-alt»\f225″

fa-venus-double»\f226″

fa-mars-double»\f227″

fa-venus-mars»\f228″

fa-mars-stroke»\f229″

fa-mars-stroke-v»\f22a»

fa-mars-stroke-h»\f22b»

fa-neuter»\f22c»

fa-genderless»\f22d»

fa-facebook-official»\f230″

fa-pinterest-p»\f231″

fa-whatsapp»\f232″

fa-server»\f233″

fa-user-plus»\f234″

fa-user-times»\f235″

fa-bed»\f236″

fa-viacoin»\f237″

fa-train»\f238″

fa-subway»\f239″

fa-medium»\f23a»

fa-y-combinator»\f23b»

fa-optin-monster»\f23c»

fa-opencart»\f23d»

fa-expeditedssl»\f23e»

fa-battery-full»\f240″

fa-battery-three-quarters»\f241″

fa-battery-half»\f242″

fa-battery-quarter»\f243″

fa-battery-empty»\f244″

fa-mouse-pointer»\f245″

fa-i-cursor»\f246″

fa-object-group»\f247″

fa-object-ungroup»\f248″

fa-sticky-note»\f249″

fa-sticky-note-o»\f24a»

fa-cc-jcb»\f24b»

fa-cc-diners-club»\f24c»

fa-clone»\f24d»

fa-balance-scale»\f24e»

fa-hourglass-o»\f250″

fa-hourglass-start»\f251″

fa-hourglass-half»\f252″

fa-hourglass-end»\f253″

fa-hourglass»\f254″

fa-hand-rock-o»\f255″

fa-hand-paper-o»\f256″

fa-hand-scissors-o»\f257″

fa-hand-lizard-o»\f258″

fa-hand-spock-o»\f259″

fa-hand-pointer-o»\f25a»

fa-hand-peace-o»\f25b»

fa-trademark»\f25c»

fa-registered»\f25d»

fa-creative-commons»\f25e»

fa-gg»\f260″

fa-gg-circle»\f261″

fa-tripadvisor»\f262″

fa-odnoklassniki»\f263″

fa-odnoklassniki-square»\f264″

fa-get-pocket»\f265″

fa-wikipedia-w»\f266″

fa-safari»\f267″

fa-chrome»\f268″

fa-firefox»\f269″

fa-opera»\f26a»

fa-internet-explorer»\f26b»

fa-television»\f26c»

fa-contao»\f26d»

fa-500px»\f26e»

fa-amazon»\f270″

fa-calendar-plus-o»\f271″

fa-calendar-minus-o»\f272″

fa-calendar-times-o»\f273″

fa-calendar-check-o»\f274″

fa-industry»\f275″

fa-map-pin»\f276″

fa-map-signs»\f277″

fa-map-o»\f278″

fa-map»\f279″

fa-commenting»\f27a»

fa-commenting-o»\f27b»

fa-houzz»\f27c»

fa-vimeo»\f27d»

fa-black-tie»\f27e»

fa-fonticons»\f280″

Вас также может заинтересовать

13Апр2020

12Апр2020

06Сен2018

font-awesome — Русский — it-swarm.com.ru

font-awesome — Русский — it-swarm.com.ru

it-swarm.com.ru

Менять цвет при наведении на значок шрифта?

Как мне уменьшить размер шрифта?

Процесс обновления для fontawesome с 4 до 5

Переключайтесь между иконками при использовании FontAwesome 5.0 SVG Framework

Переключающий шрифт Awesome 5 icon с React

Font Awesome 5 Bundle через NPM

Шрифт 5 на псевдоэлементах

Font Awesome 5 с угловым

fontawesome 5.x установка цвета на значок

Font Awesome 5 значки не отображаются

Как интегрировать FontAwesome 5 Pro с React?

Контент FontAwesome CSS не отображается

Шрифт Awesome 5 на псевдоэлементах показывает квадрат вместо иконки

Fontawesome 5 Юникод

Флажки с Font Awesome 5 иконок

Импортировать все иконки из Fontawesome

Шрифт Awesome 5 и Angular 5

Установите Font awesome 5 с помощью NPM

Добавление Font Awesome Pro в приложение React — начало работы

Как узнать, был ли уже загружен шрифт (@ font-face)?

FontAwesome не доступен как семейство шрифтов?

«Ошибка сети: 404 не найдена fontawesome-webfont.woff? V = 4.0.3

Использование значков Font Awesome в кампании Mailchimp

Как интегрировать и использовать Font Awesome с Objective-C или Swift в проекте Xcode?

Rails: использование Font Awesome

Добавить пользовательские иконки для шрифта Awesome

Потрясающе, тип ввода ‘отправить’

Alt или атрибут title для тега i

Потрясающе не отображается в Firefox / как продавать через CDN?

Используйте FontAwesome или Glyphicons с css: before

Как стилизовать цвет значка, размер и тень Font Awesome Icons

Использование Font Awesome иконки в качестве маркеров

Использование значка Font Awesome для маркеров с одним элементом списка

Использование значка шрифта (Font Awesome) выглядит немного размытым и слишком жирным

Потрясающий шрифт не отображается в Internet Explorer 8

Как использовать звездный рейтинг Font-awesome с Django?

Пользовательский стиль списка li со значком шрифта

Шрифт Awesome не работает, значки отображаются в виде квадратов

Могу ли я изменить цвет значка Font Awesome?

Используйте Font Awesome Icons в CSS

Как добавить значок кнопки в кнопку, когда она находится в состоянии загрузки?

Почему font-awesome работает на localhost, а не в сети?

Как я могу включить шрифт удивительный значок в моем SVG?

Font Awesome Icons не работают в некоторых браузерах

Как использовать значки и символы из «Font Awesome» в приложении Native Android

Оптимизируйте Font Awesome только для используемых классов

Добавить изображение в строку заголовка

Как добавить значок Font Awesome в поле ввода?

Использование значков шрифтов в качестве маркеров в Google Maps V3

Значок в опции — Bootstrap + Font-awesome

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

Шрифты не работают в Firefox

Font Awesome & Unicode

Как отцентрировать текст по вертикали с помощью большого шрифта?

Шрифты Awesome vs Glyphicons в Твиттере Bootstrap

Расширьте иконки jQuery UI с помощью Font-Awesome

Вертикальное выравнивание текста и значка в кнопке

Можно ли раскрасить потрясающие цвета значков?

Центрирование значков FontAwesome по вертикали и горизонтали

Изменить вес шрифта значков FontAwesome?

Могу ли я использовать шрифт-удивительные значки в электронных письмах

Как я могу отредактировать Font Awesome (или включить мои собственные значки)?

Извлечение SVG из Font Awesome

Используйте Font Awesome Icon As Favicon

Как использовать шрифт Awesome в собственном CSS?

Использование Font Awesome с Sass

Вращающиеся глифы/Font Awesome в Bootstrap

Как использовать Font Awesome с webjars.org с JSF

Как расположить значки Font Awesome горизонтально?

Значок Font Awesome внутри элемента ввода текста

Используйте Font Awesome Icon в Placeholder

Как складывать / перекрывать более 2 иконок в Font Awesome?

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

Не работают шрифты

Плохое отображение шрифтов Chrome

FontAwesome Icons Spin только при наведении мыши?

Fontawesome не работает, когда проект построен с ворчанием

шрифт потрясающие значки, которые не всегда отображаются в последней версии Google Chrome версия 32.0.1700.76 m

Как использовать потрясающие шрифты иконки из узловых модулей

Сделать Font Awesome иконки по кругу?

Fontawesome значок предотвратить перенос новой строки

Интервал между значками Font Awesome

Как выровнять текст по значку шрифта?

не работает font-awesome bundleconfig в MVC5

Как добавить значок поверх символа Font Awesome?

Статически вращайте шрифтовые иконки

Font Awesome значки не работают в OSX Safari

Bootstrap 3 Размещение значка внутри поля ввода

Событие клика по кнопке отправляет значок в качестве цели?

Fontawesome не работает, когда обслуживается IIS

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

Как включить иконку Font Awesome в рендер React ()

Попытка поместить значок шрифта в середине элемента div

Изменить шрифт потрясающие иконки с помощью jquery на лету

Остановить угловую анимацию в ng-show/ng-hide

Значки FontAwesome не отображаются. Зачем?

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

Font-Awesome ExtJS ActionColumn

Как отцентрировать значок шрифта в элементе div

Можно ли сделать иконки Font Awesome больше, чем «fa-5x»?

Content dated before 2011-04-08 (UTC) is licensed under CC BY-SA 2.5. Content dated from 2011-04-08 up to but not including 2018-05-02 (UTC) is licensed under CC BY-SA 3.0. Content dated on or after 2018-05-02 (UTC) is licensed under CC BY-SA 4.0. | Privacy

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 предназначен для использования со встроенными элементами (нам нравится тег <i> из-за краткости, но с тегом <span> код семантически более правильный).

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 к сайту, а затем в нужное место добавить код вывода иконки. Очень просто, давайте рассмотрим на практике.

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

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

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

1. Подключить библиотеку иконок с самого сервиса, т.е. прописать путь к файлу иконок на стороне облачного хранилища, где сервис его хранит. В этом случае каждый раз при загрузке страницы будет грузиться и данный файл. Изначально у меня стоял такой вариант, но потом я заметил, что он достаточно сильно замедляет загрузку страниц. Именно поэтому я перешел на второй вариант.
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 пикселей в ширину и высоту*/
}

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

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

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

Пока.

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

Font Awesome icons — Обучение WordPress — Библиотека U of I

Когда использовать

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

Коллекция Font Awesome включает множество типов иконок. Вы можете попробовать:

• Формы / артефакты: книга
• Элементы UX: внешняя ссылка
• Логотипы: Facebook

В приведенных ниже примерах мы используем значок книги.

Базовое использование:

[fa type = «solid» icon = «book»]

1. Найдите имя значка в базе данных Font Awesome, перейдя по адресу: http://fontawesome.com/v6.0/icons/
2. Найдите и щелкните нужный значок. Там вы увидите, что название выбранного значка находится над ним, например: адресная книга
3. Выберите тип значка, который вы хотите использовать, варианты: сплошной, обычный, светлый, двухцветный, тонкий и марки.
4. Добавьте сокращенный код в формулу сокращенного кода: [fa type = «solid» icon = «address-book»]

Варианты исполнения

• Сплошной: [fa type = «solid» icon = «адресная книга»]
• Обычный: [fa type = «regular» icon = «address-book»]
• Light: [fa type = «light» icon = «адресная книга»]
• Duotone: [fa type = «duotone» icon = «address-book»]
• Тонкий: [fa type = «thin» icon = «адресная книга»]
• Бренды: [fa type = «brands «icon =» tiktok «]

Дополнительные атрибуты: цвет, размер, в стопке

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

Цвет

Цвет Атрибут изменяет цвет значка. Сейчас мы поддерживаем три цвета. Вот примеры для книги:

• Синяя книга: [fa type = «solid» icon = «book» color = «blue»]
• Зеленая книга: [fa type = «solid» icon = «book» color = «green»]
• Оранжевая книга: [fa type = «solid» icon = «book» color = «orange»]

Пример использования: значки социальных сетей на боковой панели IAS

Размер

Атрибут size изменяет размер значка.Мы поддерживаем размер по умолчанию и еще 9 с использованием атрибута size от 2 до 10.

• По умолчанию [fa type = «solid» icon = «book»]
• Размер 2: [fa type = «solid» icon = «book» size = «2»]
• Размер 3: [fa type = «solid» icon = «book» size = «3»]
• Размер 4: [fa type = «solid» icon = «book» size = «4»]

Пример использования: значки социальных сетей на боковой панели IAS

С накоплением

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

• Книга в круге: [fa type = «solid» icon = «book» stacked = «circle»]
• Книга в квадрате: [fa type = «solid» icon = «book» stacked = «square»]
• Большая книга в зеленом квадрате: [fa type = «solid» icon = «book» stacked = «square» size = «2» color = «green»]

Пример использования: домашняя страница FYI

Использование значков Font Awesome в ссылках

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

Значок вне элемента привязки:

Код: Google [fa type = "solid" icon = "external-link"]
Визуализация: Google

Значок внутри элемента привязки:

Код: Google [fa type =» solid «icon =» external-link «]
Визуализация: Google

Пример использования: European Studies Collections and Services

Галерея NuGet | Font.Awesome 5.15.4

Этот пакет не имеет зависимостей.

пакетов NuGet (1)


Показаны первые 1 пакетов NuGet, зависящих от шрифта.Потрясающие:

Репозитории GitHub


Этот пакет не используется ни в каких популярных репозиториях GitHub.

Обновления для Font Awesome версии 5.15.4.

Font Awesome 5 — это крупное обновление по сравнению с Font Awesome 4. Вероятно, вам потребуется настроить классы fa. См. Https://fontawesome.com/how-to-use/upgrading-from-4

Обратите внимание, что этот пакет не поддерживается командой Font Awesome.

javascript — мне нужен список всех имен классов Font-Awesome

Вот список всех бесплатных имен классов иконок Font Awesome v5.0.1

  {
"name": "Font Awesome v5.0.1",
"значки": [
"фаб фа-500px",
"fab fa-available-icon",
"fab fa-accusoft",
"fas fa-address-book", "far fa-address-book",
"fas fa-address-card", "far fa-address-card",
"fas fa-adjust",
"фаб фа-адн",
"fab fa-adversal",
"fab fa-affiliatetheme",
"фаб фа-альголия",
"фас фа-выравнивание-центр",
"fas fa-align-justify",
"фас фа-выравнивание-влево",
"fas fa-align-right",
"фаб фа-амазонка",
"фас фа-скорая помощь",
"fas fa-американский язык жестов-переводчик",
"фаб фа-амилия",
"фас фа-якорь",
"фантастика-андроид",
"сказочный ангеллист",
"фас фа-угол-дабл-вниз",
"фас фа-угол-двойной-левый",
"фас фа-угол-двойной-вправо",
"фас фа-угол-удвоение",
"фас фа-угол-вниз",
"фас фа-угол-влево",
"фас фа-угол-право",
"фас фа-угол-вверх",
"фа-злойкреатив",
"фаб фа-угловой",
"фаб фа-магазин приложений",
"fab fa-app-store-ios",
"фаб фа-аппер",
"фаб фа-яблоко",
"fab fa-apple-pay",
"фас фа-архив",
"fas fa-arrow-alt-circle-down", "far fa-arrow-alt-circle-down",
"fas fa-arrow-alt-circle-left", "far fa-arrow-alt-circle-left",
"fas fa-arrow-alt-circle-right", "far fa-arrow-alt-circle-right",
"fas fa-arrow-alt-circle-up", "far fa-arrow-alt-circle-up",
"фас фа-стрелка-кружок-вниз",
"фас фа-стрелка-круг-влево",
"фас фа-стрелка-кружок-вправо",
"фас фа-стрелка-кружок-вверх",
"фас фа-стрелка вниз",
"фас фа-стрелка-влево",
"фас фа-стрелка-вправо",
"фас фа-стрелка вверх",
"фас фа-стрелки-альт",
"фас фа-стрелки-альт-ч",
"фас фа-стрелки-альт-в",
"фас-фа-ассистивные-слуховые системы",
"фас фа-звездочка",
"фаб фа-асимметрик",
"фас фа-ат",
"потрясающе-слышно",
"fas fa-audio-description",
"фаб фа-автопрефиксатор",
"фаб фа-авианекс",
"фаб фа-авиато",
"потрясающий фа-ау",
"фас фа-назад",
"фас фа-баланс-весы",
"фас фа-бан",
"fab fa-bandcamp",
"fas fa-barcode",
"фас фа-бары",
"фас фа-баня",
"fas fa-battery-empty",
"fas fa-battery-full",
"fas fa-battery-half",
"фас фа-батарея-квартал",
"fas fa-battery-три четверти",
"фас фа-кровать",
"фас фа-пиво",
"fab fa-beance",
"fab fa-beence-square",
"фас фа-бэлл", "фа-фа-бэлл",
"fas fa-bell-slash", "far fa-bell-slash",
"фас фа-велосипед",
"фаб фа-бимобъект",
"фас фа-бинокль",
"фас фа-день рождения-торт",
"фа-фа-битбакет",
"фантастика-биткойн",
"фаб-фа-бити",
"фаб фа-блэк-галстук",
"fab fa-ежевика",
"фас фа-слепой",
"потрясающий блогер",
"fab fa-blogger-b",
"фаб фа-блютуз",
"фаб фа-блютуз-б",
"фас фа-жирный",
"фас фа-болт",
"фас фа-бомба",
"фас фа-книга",
"fas fa-bookmark", "far fa-bookmark",
"фас фа-брайль",
"фас фа-портфель",
"фаб фа-бтк",
"фас фа-баг",
"фас фа-здание", "дальнее фа-здание",
"фас фа-мегафон",
"фас фа-яблочко",
"фаб фа-буромобелэксперте",
"фас фа-автобус",
"фаб фа-байселладс",
"фас фа-калькулятор",
"фас фа-календарь", "дальний фа-календарь",
"fas fa-calendar-alt", "far fa-calendar-alt",
"fas fa-calendar-check", "far fa-calendar-check",
"фас фа-календарь-минус", "далеко фа-календарь-минус",
"фас фа-календарь-плюс", "далеко фа-календарь-плюс",
"fas fa-calendar-times", "far fa-calendar-times",
"фас фа-камера",
"фас фа-камера-ретро",
"фас фа-кар",
"фас фа-каре-вниз",
"фас фа-каретка-слева",
"фас фа-каретка-право",
"fas fa-caret-square-down", "far fa-caret-square-down",
"fas fa-caret-square-left", "far fa-caret-square-left",
"fas fa-caret-square-right", "far fa-caret-square-right",
"fas fa-caret-square-up", "far fa-caret-square-up",
"фас фа-карет-вверх",
"фас фа-тележка-стрелка-вниз",
"фас фа-тележка-плюс",
"фаб фа-сс-амекс",
"fab fa-cc-apple-pay",
"fab fa-cc-diners-club",
"fab fa-cc-discover",
"фаб фа-cc-jcb",
"fab fa-cc-mastercard",
"fab fa-cc-paypal",
"fab fa-cc-stripe",
"fab fa-cc-visa",
"фабрика фа-центркод",
"фас фа-сертификат",
"fas fa-chart-area",
"fas fa-chart-bar", "far fa-chart-bar",
"fas fa-chart-line",
"фас фа-диаграмма-пирог",
"фас фа-чек",
"fas fa-check-circle", "far fa-check-circle",
"фас-фа-чек-квадрат", "дальний-фа-чек-квадрат",
"фас фа-шеврон-круг-вниз",
"фас фа-шеврон-круг-левый",
"фас фа-шеврон-круг-вправо",
"фас фа-шеврон-круг-вверх",
"фас фа-шеврон-вниз",
"фас фа-шеврон-лево",
"фас фа-шеврон-право",
"фас фа-шеврон-вверх",
"фас фа-дитя",
"фаб фа-хром",
"фас фа-круг", "дальний фа-круг",
"фас фа-круг-выемка",
"fas fa-clipboard", "far fa-clipboard",
"фас фа-часы", "далеко фа-часы",
"fas fa-clone", "far fa-clone",
"fas fa-closed-captioning", "far fa-closed-captioning",
"фас фа-облако",
"fas fa-cloud-download-alt",
"fas fa-cloud-upload-alt",
"fab fa-cloudscale",
"фаб фа-клаудмит",
"fab fa-cloudversify",
"fas fa-code",
"fas fa-code-branch",
"fab fa-codepen",
"fab fa-codiepie",
"фас фа-кофе",
"фас фа-винтик",
"фас фа-винтики",
"фас фа-колонны",
"fas fa-comment", "far fa-comment",
"fas fa-comment-alt", "far fa-comment-alt",
"fas fa-comments", "far fa-comments",
"фас фа-компас", "дальний фа-компас",
"фас фа-компресс",
"фаб фа-коннектдевелоп",
"фаб фа-контао",
"fas fa-copy", "far fa-copy",
"fas fa-copyright", "far fa-copyright",
"фаб фа-спанель",
"fab fa-creative-commons",
"fas fa-кредитная карта", "far fa-кредитная карта",
"фас фа-урожай",
"фас фа-перекрестие",
"fab fa-css3",
"fab fa-css3-alt",
"фас фа-куб",
"фас фа-кубики",
"фас фа-вырезать",
"фа-фа-каракатица",
"фаб фа-д-и-д",
"фаб фа-дашкуб",
"fas fa-database",
"фас фа-глухой",
"фа-фа-вкусно",
"fab fa-deploydog",
"фаб фа-дескпро",
"фас фа-рабочий стол",
"fab fa-deviantart",
"фа-фа-дигг",
"фаб фа-цифровой-океан",
"фа-фа-раздор",
"сказочный дискурс",
"фаб фа-дочуб",
"фаб фа-докер",
"фас фа-знак доллара",
"фас фа-точка-круг", "дальний фа-точка-круг",
"фас фа-скачать",
"фаб фа-draft2digital",
"фа-фа-дриббл",
"fab fa-dribbble-square",
"fab fa-dropbox",
"фаб фа-друпал",
"фаб фа-диалог",
"сказочные фа-ранние птицы",
"фаб фа-край",
"фас фа-редактировать", "далеко фа-редактировать",
"fas fa-eject",
"fas fa-ellipsis-h",
"fas fa-ellipsis-v",
"fab fa-ember",
"сказочная империя",
"фас фа-конверт", "дальний фа-конверт",
"fas fa-envelope-open", "far fa-envelope-open",
"фас фа-конверт-квадрат",
"фаб фа-энвира",
"фас фа-ластик",
"фаб фа-эрланг",
"фаб фа-эцы",
"фас фа-евро-знак",
"fas fa-exchange-alt",
"фас фа-восклицание",
"фас фа-восклицательный круг",
"фас фа-восклицательный-треугольник",
"fas fa-expand",
"fas fa-expand-стрелки-alt",
"fab fa-Expeditedssl",
"fas fa-external-link-alt",
"fas fa-external-link-square-alt",
"фас фа-глаз",
"фас фа-пипетка",
"fas fa-eye-slash", "far fa-eye-slash",
"fab fa-facebook",
"fab fa-facebook-f",
"fab fa-facebook-messenger",
"fab fa-facebook-square",
"фас фа-быстро-назад",
"фас фа-перемотка вперед",
"фас фа-факс",
"фас фа-женский",
"фас фа-истребитель",
"fas fa-file", "far fa-file",
"fas fa-file-alt", "far fa-file-alt",
"fas fa-file-archive", "far fa-file-archive",
"fas fa-file-audio", "far fa-file-audio",
"fas fa-file-code", "far fa-file-code",
"fas fa-file-excel", "far fa-file-excel",
"fas fa-file-image", "far fa-file-image",
"fas fa-file-pdf", "far fa-file-pdf",
"fas fa-file-powerpoint", "far fa-file-powerpoint",
"fas fa-file-video", "far fa-file-video",
"fas fa-file-word", "far fa-file-word",
"фас фа-фильм",
"фас фа-фильтр",
"фас фа-огонь",
"фас фа-огнетушитель",
"fab fa-firefox",
"fab fa-first-order",
"fab fa-firstdraft",
"фас фа-флаг", "дальний фа-флаг",
"фас фа-флаг в клетку",
"фас фа-фляга",
"fab fa-flickr",
"фа-фа-муха",
"fas fa-folder", "far fa-folder",
"fas fa-folder-open", "far fa-folder-open",
"fas fa-font",
"потрясающий шрифт потрясающий",
"fab fa-font-awesome-alt",
"fab fa-font-awesome-flag",
"фаб фа-фонтиконы",
"фаб фа-фонтиконс-фи",
"фа-форт-круто",
"fab fa-fort-awesome-alt",
"фаб фа-форумби",
"фас фа-вперед",
"fab fa-foursquare",
"fab fa-free-code-camp",
"fab fa-freebsd",
"фас фа-хмуриться", "далеко фа-хмуриться",
"фас фа-футбол", "фар фа-футбол",
"фас фа-геймпад",
"фас фа-молоток",
"фас фа-драгоценный камень", "дальний фа-драгоценный камень",
"фас фа - бесполый",
"фа-фа-получить-карман",
"fab fa-gg",
"фаб фа-гг-круг",
"фас фа-подарок",
"сказочный фа-мерзавец",
"fab fa-git-square",
"fab fa-github",
"fab fa-github-alt",
"fab fa-github-square",
"fab fa-gitkraken",
"фаб фа-гитлаб",
"сказочный фа-гиттер",
"фас фа-бокал-мартини",
"фаб фа-скольжение",
"фаб фа-скольжение-г",
"фас фа-глобус",
"фаб фа-гофор",
"fab fa-goodreads",
"fab fa-goodreads-g",
"фа-фа-гугл",
"fab fa-google-drive",
"фа-фа-гугл-плей",
"потрясающий фа-гугл-плюс",
"fab fa-google-plus-g",
"fab fa-google-plus-square",
"fab fa-google-кошелек",
"фас фа-градация-шапка",
"фаб фа-гратипай",
"фаб фа-грав",
"фаб фа-грипфайр",
"фаб фа-грунт",
"фаб фа-глоток",
"фас фа-ч-квадрат",
"фа-фа-хакер-новости",
"fab fa-hacker-news-square",
"фас фа-рука-ящерица", "дальняя фа-рука-ящерица",
"fas fa-hand-paper", "far fa-hand-paper",
"fas fa-hand-peace", "far fa-hand-peace",
"fas fa-hand-point-down", "far fa-hand-point-down",
"fas fa-hand-point-left", "far fa-hand-point-left",
"fas fa-hand-point-right", "far fa-hand-point-right",
"fas fa-hand-point-up", "far fa-hand-point-up",
"fas fa-hand-указатель", "far fa-hand-pointer",
"fas fa-hand-rock", "far fa-hand-rock",
"fas fa-hand-scissors", "far fa-hand-scissors",
"fas fa-hand-spock", "far fa-hand-spock",
"fas fa-handshake", "far fa-handshake",
"fas fa-hashtag",
"fas fa-hdd", "far fa-hdd",
"fas fa-heading",
"фас фа-наушники",
"фас фа-сердце", "далеко фа-сердце",
"fas fa-heartbeat",
"fab fa-наймите-помощника",
"фас фа-история",
"фас фа-дом",
"фаб фа-хули",
"фас фа-госпиталь", "фар фа-госпиталь",
"фаб фа-хотжар",
"фас фа-песочные часы", "далеко фа-песочные часы",
"фас фа-конец песочных часов",
"фас фа-половина песочных часов",
"фас фа-песочные часы-старт",
"fab fa-houzz",
"fab fa-html5",
"fab fa-hubspot",
"fas fa-i-cursor",
"fas fa-id-badge", "far fa-id-badge",
"fas fa-id-card", "far fa-id-card",
"фас фа-образ", "дальний фа-образ",
"fas fa-images", "far fa-images",
"фаб фа-имдб",
"fas fa-inbox",
"фас фа-отступ",
"фас фа-индустрия",
"фас фа-инфо",
"фас фа-инфо-круг",
"фаб фа-инстаграм",
"fab fa-internet-explorer",
"фаб фа-ioxhost",
"фас фа-курсив",
"сказочный фа-itunes",
"fab fa-itunes-note",
"фаб фа-дженкинс",
"фаб фа-жогет",
"фаб фа-джумла",
"фаб фа-джи",
"fab fa-js-square",
"fab fa-jsfiddle",
"фас фа-ключ",
"fas fa-keyboard", "far fa-keyboard",
"fab fa-keycdn",
"потрясающий кикстартер",
"фаб фа-кикстартер-к",
"фас фа-язык",
"фас фа-ноутбук",
"фаб фа-ларавел",
"фаб фа-lastfm",
"fab fa-lastfm-square",
"фас фа-лист",
"фаб фа-лианпаб",
"фас фа-лимон", "фар фа-лимон",
"фантастика-меньше",
"fas fa-level-down-alt",
"fas fa-level-up-alt",
"fas fa-life-ring", "far fa-life-ring",
"fas fa-lightbulb", "far fa-lightbulb",
"фаб фа-линия",
"фас фа-ссылка",
"фаб фа-linkedin",
"фаб фа-linkedin-ин",
"фаб фа-линод",
"фаб фа-линукс",
"фас фа-лира-знак",
"фас фа-лист",
"fas fa-list-alt", "far fa-list-alt",
"фас фа-лист-ол",
"фас фа-лист-ул",
"fas fa-location-arrow",
"фас фа-лок",
"fas fa-lock-open",
"fas fa-long-arrow-alt-down",
"fas fa-long-arrow-alt-left",
"fas fa-long-arrow-alt-right",
"fas fa-long-arrow-alt-up",
"фас фа-слабовидящий",
"фаб фа-лыфт",
"fab fa-magento",
"фас фа-магия",
"фас фа-магнит",
"фас фа-мужчина",
"фас фа-карта", "далека фа-карта",
"фас фа-карта-маркер",
"фас фа-карта-маркер-альт",
"фас фа-мап-пин",
"фас фа-карта-знаки",
"фас фа-марс",
"фас фа-марс-дабл",
"фас фа-марс-ход",
"фас фа-марс-ход-ч",
"фас фа-марс-ход-в",
"фаб фа-максcdn",
"фаб фа-медаппс",
"фаб фа-средний",
"фаб фа-средний-м",
"фас фа-медкит",
"фаб фа-медрт",
"потрясающая встреча",
"фас фа-мех", "далеко фа-мех",
"фас фа-ртуть",
"фас фа-микрочип",
"фас фа-микрофон",
"фас фа-микрофон-слэш",
"фаб фа-майкрософт",
"фас фа-минус",
"фас фа-минус-круг",
"фас фа-минус-квадрат", "дальний фа-минус-квадрат",
"фаб фа-микс",
"fab fa-mixcloud",
"фаб фа-мизуни",
"фас фа-мобайл",
"fas fa-mobile-alt",
"фаб фа-модкс",
"фаб фа-монеро",
"fas fa-money-bill-alt", "far fa-money-bill-alt",
"фас фа-луна", "далека фа-луна",
"фас фа-мотоцикл",
"фас фа-указатель мыши",
"фас фа-музыка",
"фаб фа-напстер",
"fas fa-neuter",
"фас фа-газета", "фа-фа-газета",
"fab fa-nintendo-switch",
"фаб фа-узел",
"фаб фа-узел-js",
"fab fa-npm",
"фаб фа-нс8",
"фаб фа-нутритикс",
"fas fa-object-group", "far fa-object-group",
"фас фа-объект-разгруппировать", "далеко фа-объект-разгруппировать",
"фаб фа-одноклассники",
"фаб фа-одноклассники-сквер", г.
"фаб фа-опенкарт",
"фаб фа-опенид",
"фа-фа-опера",
"фа-оптин-монстр",
"фаб фа-оси",
"fas fa-outdent",
"fab fa-page4",
"fab fa-pagelines",
"фас фа-малярка-кисть",
"фаб фа-пальфед",
"фас фа-бумажный самолетик", "дальний фа-бумажный самолетик",
"фас фа-скрепка",
"фас фа-абзац",
"фас фа-паста",
"фаб фа-патреон",
"фас фа-пауза",
"фас фа-пауза-круг", "дальний фа-пауза-круг",
"фас фа-лапа",
"фаб фа-пайпал",
"фас фа-пен-квадрат",
"фас фа-карандаш-альт",
"фас фа-процент",
"фантастический перископ",
"фаб фа-фабрикатор",
"фаб фа-феникс-фреймворк",
"фас фа-телефон",
"фас фа-телефон-квадрат",
"fas fa-phone-volume",
"фаб фа-крысолов",
"fab fa-pied-piper-alt",
"фаб фа-пид-волынщик-пп",
"fab fa-pinterest",
"fab fa-pinterest-p",
"fab fa-pinterest-square",
"фас фа-самолет",
"фас фа-играй",
"фас фа-плей-круг", "дальний фа-плей-круг",
"потрясающая игровая приставка",
"фас фа-вилка",
"фас фа-плюс",
"фас фа-плюс-круг",
"фас фа-плюс-квадрат", "дальний фа-плюс-квадрат",
"фас фа-подкаст",
"фас фа-фунт-знак",
"fas fa-power-off",
"фас фа-принт",
"фаб фа-продукт-охота",
"фа-фа-толкнул",
"фас фа-пазл",
"фантастический питон",
"фаб фа-кв",
"fas fa-qrcode",
"фас фа-вопрос",
"фас фа-вопрос-круг", "далеко фа-вопрос-круг",
"фаб фа-кора",
"fas fa-quote-left",
"фас фа-цитата-право",
"фас фа-случайный",
"фаб фа-равелри",
"fab fa-react",
"фаб фа-мятежник",
"fas fa-recycle",
"фаб фа-красная-река",
"фаб фа-реддит",
"fab fa-reddit-alien",
"фаб фа-реддит-квадрат",
"фас фа-повтор",
"fas fa-redo-alt",
"зарегистрированный фас-фа", "зарегистрированный далеко-фа",
"fab fa-rendact",
"фаб фа-ренрен",
"фас фа-ответ",
"фас фа-ответ-все",
"потрясающий ответ",
"потрясающее разрешение",
"фас фа-ретвит",
"фас фа-роуд",
"фас фа-ракета",
"fab fa-rocketchat",
"фаб фа-рокрмс",
"fas fa-rss",
"fas fa-rss-square",
"фас фа-знак-рубль",
"фас фа-рупия-знак",
"сказочное сафари",
"фаб фа-сасс",
"фас фа-сохранить", "далеко фа-сохранить",
"fab fa-schlix",
"фа-фа-скрибд",
"фас фа-поиск",
"фас фа-поиск-минус",
"fas fa-search-plus",
"fab fa-searchchengin",
"fab fa-sellcast",
"fab fa-sellsy",
"фас фа-сервер",
"fab fa-servicestack",
"фас фа-доля",
"fas fa-share-alt",
"фас фа-акция-альт-квадрат",
"фас фа-акция-квадрат", "дальняя-фа-акция-квадрат",
"фас фа-шекель-знак",
"фас фа-щит-альт",
"фас фа-шип",
"fab fa-shirtsinbulk",
"фас фа-хозяйственная сумка",
"фас фа-корзина для покупок",
"fas fa-shopping-cart",
"фас фа-душ",
"fas fa-sign-in-alt",
"фас фа-язык жестов",
"fas fa-sign-out-alt",
"фас фа-сигнал",
"fab fa-simplebuilt",
"fab fa-sistrix",
"fas fa-sitemap",
"фаб фа-скиатлас",
"фаб фа-скайп",
"фаб фа-слабина",
"фа-фа-слабина-хеш",
"фас фа-ползунки-ч",
"fab fa-slideshare",
"фас фа-улыбка", "далека фа-улыбка",
"фаб фа-снэпчат",
"фантастика-снэпчат-призрак",
"фаб фа-снэпчат-квадрат",
"фас фа-снежинка", "далека фа-снежинка",
"фас фа-сортировка",
"фас фа-сортировать-альфа-вниз",
"фас фа-сортировка-альфа-вверх",
"fas fa-sort-amount-down",
"fas fa-sort-amount-up",
"фас фа-сортировка вниз",
"fas fa-sort-numeric-down",
"fas fa-sort-numeric-up",
"фас фа-сортировка",
"fab fa-soundcloud",
"фас фа-спейс-шаттл",
"fab fa-speakap",
"фас фа-прядильщик",
"fab fa-spotify",
"фас фа-квадрат", "дальний фа-квадрат",
"фаб фа-стек-обмен",
"fab fa-stack-overflow",
"фас фа-звезда", "далекая фа-звезда",
"fas fa-star-half", "far fa-star-half",
"фа-фа-останься линк",
"фаб фа-пар",
"фаб фа-пар-квадрат",
"фаб фа-пар-символ",
"фас фа-шаг назад",
"фас фа-шаг-вперед",
"фас фа-стетоскоп",
"сказочный фа-стикер-мул",
"фас фа-липкая-заметка", "далекая-фа-липкая-заметка",
"фас фа-стоп",
"фас фа-стоп-круг", "дальний фа-стоп-круг",
"фаб фа-страва",
"фас фа-вид на улицу",
"фас фа-зачеркивание",
"фантастическая полоса",
"fab fa-stripe-s",
"фаб фа-студиовинари",
"фантастика-спотыкаться",
"фаб фа-спотыкаться-круг",
"fas fa-subscript",
"фас фа-метро",
"фас фа-чемодан",
"фас фа-солнце", "далекое фа-солнце",
"потрясающие суперсилы",
"fas fa-superscript",
"фаб фа-гибкость",
"fas fa-sync",
"fas fa-sync-alt",
"фас фа-стол",
"фас фа-таблетка",
"fas fa-tablet-alt",
"фас фа-тахометр-альт",
"фас фа-тег",
"фас фа-теги",
"фас фа-задачи",
"фас фа-такси",
"фантастическая телеграмма",
"фаб фа-телеграмма-самолет",
"fab fa-tencent-weibo",
"фас фа-терминал",
"fas fa-text-height",
"fas fa-text-width",
"fas fa-th",
"фас фа-й-большой",
"fas fa-th-list",
"fab fa-themeisle",
"фас фа-термометр-пустой",
"фас фа-термометр-полный",
"фас фа-термометр-половина",
"фас фа-термометр-квартал",
"фас фа-термометр-три четверти",
"фас фа-большие пальцы вниз", "далеко фа-большие пальцы руки вниз",
"фас фа-большие пальцы руки вверх", "далеко фа-большие пальцы руки вверх",
"фас фа-канцелярская кнопка",
"фас фа-билет-альт",
"фас фа-таймс",
"фас фа-раз-круг", "далеко фа-раз-круг",
"фас фа-оттенок",
"fas fa-toggle-off",
"fas fa-toggle-on",
"фас фа-торговая марка",
"фас фа-поезд",
"fas fa-transgender",
"fas fa-transgender-alt",
"фас фа-мусор",
"fas fa-trash-alt", "far fa-trash-alt",
"фас фа-дерево",
"фа-трелло",
"fab fa-tripadvisor",
"фас фа-трофей",
"фас фа-грузовик",
"fas fa-tty",
"фаб фа-тамблер",
"фаб фа-тамблер-квадрат",
"фас фа-тв",
"фа-фа-твич",
"fab fa-twitter",
"fab fa-twitter-square",
"fab fa-typo3",
"фаб фа-убер",
"фаб фа-уикит",
"фас фа-зонт",
"фас фа-подчеркивание",
"фас фа-ундо",
"fas fa-undo-alt",
"fab fa-uniregistry",
"фас фа универсальный доступ",
"фас фа-университет",
"fas fa-unlink",
"фас фа-разблокировка",
"fas fa-unlock-alt",
"fab fa-untappd",
"фас фа-закачка",
"фаб фа-USB",
"fas fa-user", "far fa-user",
"fas fa-user-circle", "far fa-user-circle",
"fas fa-user-md",
"fas fa-user-plus",
"fas fa-user-secret",
"fas fa-user-times",
"fas fa-users",
"fab fa-ussunnah",
"фас фа-посуда-ложка",
"фас фа-посуда",
"фаб фа-ваадин",
"фас фа-венера",
"фас фа-венера-двойник",
"фас фа-венера-марс",
"fab fa-viacoin",
"фаб фа-виа део",
"фаб фа-виадео-квадрат",
"фаб фа-вибер",
"фас фа-видео",
"фаб фа-вимео",
"фаб фа-вимео-квадрат",
"фаб фа-вимео-в",
"фаб фа-вайн",
"фаб фа-вк",
"фаб фа-внв",
"фас фа-громкость-вниз",
"fas fa-volume-off",
"фас фа-объем-вверх",
"фаб фа-вуэйс",
"фаб фа-вейбо",
"fab fa-weixin",
"потрясающий фа-ватсап",
"fab fa-whatsapp-square",
"фас фа-инвалидная коляска",
"fab fa-whmcs",
"фас фа-вайфай",
"fab fa-wikipedia-w",
"фас фа-окно-закрыть", "далеко фа-окно-закрыть",
"fas fa-window-maximize", "far fa-window-maximize",
"фас фа-окно-минимизировать",
"fas fa-window-restore", "far fa-window-restore",
"fab fa-windows",
"фас фа-вон-знак",
"fab fa-wordpress",
"fab fa-wordpress-simple",
"fab fa-wpbeginner",
"fab fa-wpexplorer",
"fab fa-wpforms",
"фас фа-гаечный ключ",
"fab fa-xbox",
"fab fa-xing",
"fab fa-xing-square",
"фаб фа-у-комбинатор",
"fab fa-yahoo",
"фаб фа-яндекс",
"фаб фа-яндекс-интернэшнл",
"фа-фа-тявкать",
"фас фа-йен-знак",
"фаб фа-йоаст",
"fab fa-youtube"
]
}
  

, и это тоже суть: https: // gist.github.com/mohamdio/982653e3a8ae35f892f13c5ef0ef9b58

Blog Awesome — Главная

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

Font Awesome 3.2

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

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

Пока что в 3.2 я добавил 48 новых иконок. Я просматривал список наиболее комментируемых запросов на значки, чтобы понять, какие значки пользуются наибольшим спросом, с особым упором на международную привлекательность.Добавлено 8 самых популярных мировых валют и более 20 новых значков брендов. И я еще не закончил.

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

И большое спасибо @robmadole за огромную помощь в создании фантастической системы сборки для Font Awesome. Вся генерация CSS, LESS и документации осуществляется с помощью главного файла icons.yml. Это означает, что больше не будет глупых ошибок при обновлении версии в документации, отсутствия значков в документации и т. Д.О, и Джекил абсолютно надрывает задницу для создания статических веб-сайтов.

Font Awesome 4.0

С тех пор, как Font Awesome 1.0 был выпущен более года назад, мы узнали кое-что о том, как лучше всего использовать иконочные шрифты. Версия 4.0 будет иметь класс префикса (вероятно, fa или fontawesome ) вместе с именем значка ( fa-heart или fontawesome-heart ). Поскольку CSS больше не будет содержать совпадающих селекторов, время рендеринга CSS значительно ускорится.Мы также не будем уделять больше внимания поддержке IE7 (хотя она останется на базовом уровне, поскольку стоимость минимальна). И мы добавим поддержку Foundation и рассмотрим, насколько возможна поддержка GSUB.

Хотите узнать, как идут дела, или получить подробную информацию о проблемах? Я слежу за выпуском на этапе 4.0 Font Awesome.

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

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

Расширенная функция

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

Добавление кода Font Awesome Kit на ваш сайт

Мы создали набор Font Awesome, который можно использовать на любом сайте, использующем домен «sites.uci.edu». Если вы используете собственный домен, вам нужно будет создать свой собственный Font Awesome Kit.См. Инструкции ниже.

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

Набор потрясающих шрифтов для сайтов UCI

Этот комплект будет работать только с доменами sites.uci.edu . Если вы используете личный домен, этот код не будет работать. Следуйте приведенным ниже инструкциям, чтобы получить собственную учетную запись FontAwesome и Kit.

Комплект сайтов UCI, код

Скопируйте этот код набора в раздел head на своем сайте.

Divi Theme

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

1. Go Divi> Параметры темы
2. Щелкните вкладку Integration в параметрах темы Divi
3. В поле Добавьте код в раздела вашего блога , вставьте код из нашего набора Font Awesome.См. Код комплекта выше.
4. Нажмите Сохранить изменения .
5. Теперь вы можете использовать значки Font Awesome на своем сайте.

Темы, не относящиеся к Divi

Если вы не используете Divi в качестве темы, не бойтесь, вы все равно можете добавить код в раздел вашего сайта. Сначала вам нужно будет включить плагин Advanced Settings .

1. Перейдите к Plugins> All
2. Найдите Advanced Settings и нажмите кнопку Activate .
3. После активации перейдите в «Настройки »> «Дополнительные настройки».
4. Прокрутите вниз до «Дополнительный код » и вставьте код своего набора в поле «Тег заголовка (низкий приоритет)».
5. Нажмите Сохранить изменения

Как добавить значки Font Awesome на свой сайт

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

В поисках нужного значка

1. Введите условие поиска в поле поиска. Вы можете использовать фильтр для бесплатных значков, чтобы ограничить набор значков теми, для которых не требуется платная лицензия. Мы используем бесплатную лицензию.
2. Например, если вы ищете значок предупреждения, введите «предупреждение». Вы увидите набор значков, соответствующих этому описанию. Найдите тот, который лучше всего соответствует вашим потребностям.
3. В качестве альтернативы, вы можете просто просмотреть 1600+ бесплатных значков, прокручивая весь набор.
4. Когда вы найдете тот, который вам нравится, щелкните значок, чтобы просмотреть подробную информацию об этом значке, включая HTML-код для использования значка на вашем сайте.
5. Скопируйте предоставленный HTML-код. Он начнется с

Использование кода значка

Теперь, когда вы нашли идеальный значок, пора добавить его на свой сайт.

Редактор блоков

Если вы используете редактор блоков, вы можете добавить код, используя опцию HTML в блоке абзаца или используя блок HTML.

1. Чтобы отредактировать блок абзаца как HTML, щелкните три точки справа в параметрах блока и выберите «Редактировать как HTML».
2. Теперь вы увидите HTML-код абзаца. Добавьте код Font Awesome туда, где должен отображаться значок.

   (пример представления HTML с добавленным кодом значка)

3. Значок будет того же размера, что и ваш текст. Если вы хотите изменить размер, вы можете использовать класс CSS, чтобы сделать его больше или меньше. У Font Awesome есть отличная страница, объясняющая, как использовать эти классы и где разместить код.
4. Обратите внимание: вы можете вернуться к визуальному редактору, щелкнув три точки и выбрав «Редактировать визуально» после добавления кода значка.
5. Вы не увидите значок в блоке во время редактирования, но вы можете Предварительный просмотр страницы, и вы увидите отображаемый значок. Если вы не видите значок, убедитесь, что вы добавили Font Awesome Kit на свой сайт. Значки берутся прямо с веб-сайта Font Awesome.
6. Вы можете использовать эти значки в любом блоке, который позволяет редактировать HTML.

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

Если вы используете тему Divi и / или конструктор страниц, вы также можете использовать значки Font Awesome. В некотором смысле это проще, поскольку вы видите значок, отображаемый во время редактирования. Предварительный просмотр не требуется, чтобы увидеть изменения.

В Divi вы можете использовать значок Font Awesome в любом модуле, который позволяет редактировать как на вкладке «Текст» (HTML), так и на вкладке «Визуальный».

1. Отредактируйте блок, в который вы хотите добавить значок, например текстовый модуль.
2. Щелкните вкладку Текст при редактировании содержимого, чтобы отобразить базовый HTML.
3. Добавьте HTML-код значка Font Awesome, который вы скопировали ранее.
4. Вставьте его в желаемое место и добавьте класс CSS, чтобы при необходимости изменить размер.
5. Сохраните модуль.
6. В Divi вы должны увидеть значок в режиме редактирования, так как вы видите страницу в реальном времени.

Получение собственного кода Font Awesome Kit (для пользовательских доменов)

Если вы используете личный домен, вам необходимо создать учетную запись Font Awesome, чтобы получить доступ к их бесплатным наборам.Тот, который мы создали для сайтов UCI, работает только с сайтами, использующими домен «sites.uci.edu». У Font Awesome также есть платные аккаунты, которые добавляют еще больше иконок. По состоянию на июнь 2021 года учетные записи Pro имеют 7800 значков и другие функции. Бесплатной учетной записи, вероятно, будет достаточно, но хорошо знать, что есть варианты.

1. Перейти на стартовую страницу Font Awesome.
2. Добавьте свой адрес электронной почты и нажмите кнопку « Отправить код набора ».
3. Проверьте свою электронную почту для подтверждения и настройте свой пароль и данные учетной записи.
4. После того, как вы настроите свою учетную запись, вам будет предоставлен набор , код . Вы будете использовать этот код, чтобы добавить Font Awesome на свой сайт.
5. Используйте приведенные выше инструкции, чтобы добавить свой собственный комплект в раздел вашего сайта. Замените код набора UCI Sites своим собственным.

Это может показаться немного сложным, пока вы не проделаете это несколько раз. Теперь у вас есть возможность использовать более 1600 масштабируемых значков, чтобы повысить интерес и удобство использования вашего сайта. Попробуйте!

Связанные

@ fortawesome / angular-fontawesome — npm

Официальный компонент Angular для Font Awesome 5+

Установка

Используя нг, добавьте :

  # См. Таблицу совместимости ниже, чтобы выбрать правильную версию
$ ng add @ fortawesome / angular-fontawesome @ <версия>
  

Использование пряжи

  $ пряжа добавить @ fortawesome / fontawesome-svg-core
$ пряжа добавить @ fortawesome / free-solid-svg-icons
# См. Таблицу совместимости ниже, чтобы выбрать правильную версию
$ yarn add @ fortawesome / angular-fontawesome @ <версия>
  

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

  $ npm install @ fortawesome / fontawesome-svg-core
$ npm install @ fortawesome / free-solid-svg-icons
# См. Таблицу совместимости ниже, чтобы выбрать правильную версию
$ npm install @ fortawesome / angular-fontawesome @ <версия>
  

Таблица совместимости

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

Чтобы начать работу с Font Awesome с Angular, выполните следующие действия:

1. Добавить FontAwesomeModule в импортирует в
SRC / приложение / приложение.module.ts :

    импортировать {BrowserModule} из '@ angular / platform-browser';
   импортировать {NgModule} из '@ angular / core';
   
   импортировать {AppComponent} из './app.component';
   импортировать {FontAwesomeModule} из '@ fortawesome / angular-fontawesome';
   
   @NgModule ({
     импорт: [
       BrowserModule,
       FontAwesomeModule
     ],
     объявления: [AppComponent],
     бутстрап: [AppComponent]
   })
   экспортный класс AppModule {} 

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

    импортировать {Компонент} из '@ angular / core';
   импортировать {faCoffee} из '@ fortawesome / free-solid-svg-icons';
   
   @Составная часть({
     селектор: 'app-root',
     templateUrl: './app.component.html'
   })
   export class AppComponent {
     faCoffee = faCoffee;
   } 

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

Документация

Примеры

Stackblitz

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

Демо-приложение

Вы можете найти примеры в каталоге projects / demo . Вы можете следовать документации, чтобы запустить демонстрационное приложение на своем компьютере.

Вклад

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

Авторы

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

Если мы кого-то пропустили (что весьма вероятно), отправьте нам запрос на вытягивание, и мы решим его.

Команда The Font Awesome:

Font Awesome | Библиотека цифровых паттернов v1.0.0

Font Awesome | Библиотека цифровых паттернов v1.0.0

Font Awesome

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

Правила для Font Awesome

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

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

Запрос дополнительных значков

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

Доступные опции

Использование образца

Вот несколько примеров значков.Код

Утвержденные значки

Чтобы использовать в качестве имени класса, добавьте к имени значка префикс fa- , например fa-address-book .


Пример календарного чека


Пример календаря-минус-о


Пример календаря-плюс-о


Пример календаря-раз-о


Пример проверки-кружка-о


Пример чек-квадрат-о


Пример облачной загрузки


Пример восклицательного круга


Пример восклицательного треугольника


Пример facebook-official


Пример file-archive-o


Пример файла-изображения-о


Пример файла-powerpoint-o


Пример флага в клетку


Пример выпускного колпачка


Пример стрелки-указателя


Пример mail-reply-all


Пример снэпчат-квадрата


Пример sort-alpha-asc


Пример sort-alpha-desc


Пример sort-amount-asc


Пример sort-amount-desc


Пример sort-numeric-asc


Пример sort-numeric-desc


Пример твиттер-квадрата


Пример разворачивания окна


Пример свертывания окна


Пример восстановления окна


Пример youtube-square

Код

 
        
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                     

                         
                        Пример календарного чека
                     

                
                
                     

                         
                        Пример календаря-минус-о
                     

                
                
                
                     

                         
                        Пример календаря-плюс-о
                     

                
                
                     

                         
                        Пример календаря-раз-о
                     

                
                
                
                
                     

                         
                        Пример проверки-кружка-о
                     

                
                
                
                     

                         
                        Пример чек-квадрат-о
                     

                
                
                
                
                
                
                     

                         
                        Пример облачной загрузки
                     

                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                     

                         
                        Пример восклицательного круга
                     

                
                
                     

                         
                        Пример восклицательного треугольника
                     

                
                
                
                     

                         
                        Пример facebook-official
                     

                
                
                
                     

                         
                        Пример file-archive-o
                     

                
                
                
                
                
                
                
                
                
                     

                         
                        Пример файла-изображения-о
                     

                
                
                     

                         
                        Пример файла-powerpoint-o
                     

                
                
                
                
                
                
                
                
                
                     

                         
                        Пример флага в клетку
                     

                
                
                
                
                
                
                     

                         
                        Пример выпускного колпачка
                     

                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                     

                         
                        Пример стрелки-указателя
                     

                
                
                
                
                
                     

                         
                        Пример mail-reply-all
                     

                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                     

                         
                        Пример снэпчат-квадрата
                     

                
                
                
                     

                         
                        Пример sort-alpha-asc
                     

                
                
                     

                         
                        Пример sort-alpha-desc
                     

                
                
                     

                         
                        Пример sort-amount-asc
                     

                
                
                     

                         
                        Пример sort-amount-desc
                     

                
                
                
                
                
                     

                         
                        Пример sort-numeric-asc
                     

                
                
                     

                         
                        Пример sort-numeric-desc
                     

                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                     

                         
                        Пример твиттер-квадрата
                     

                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                     

                         
                        Пример разворачивания окна
                     

                
                
                     

                         
                        Пример свертывания окна
                     

                
                
                     

                         
                        Пример восстановления окна
                     

                
                
                
                     

                         
                        Пример youtube-square
                     

                
        
    
  

.