Сообщество Font Awesome
Font Awesome имеет динамически развивающееся сообщество, где каждый помогает друг другу. Вы можете обратьтся в поддержку, сообщить об ошибках, запросить новые иконки, прислать исправления ошибок, и следить за будущим Font Awesome.
Обращение в поддержку
У вас не получается работать с Font Awesome? Что-то работает не так как хотелось бы вам? Я ненавижу это. К сожалению, у меня больше не хватает времени осуществлять поддержку по электронной почте, поэтому предлагаю вам такую последовательность ваших действий:
- Вы должны быть уверены, что прочитали последнюю версию раздела «начало работы». Этот раздел был недавно обновлен, чтобы он стал еще проще в использовании.
- Проверьте имеющиеся вопросы, помеченные как Font Awesome, в Stack Overflow. Возможно, уже кто-то сталкивался с такой же ошибкой.
- Не нашли ответа на ваш вопрос в Stack Overflow?
Задайте вопрос, а затем
напишите мне на имейл и я постараюсь посмотреть.
Запрос новых иконок
Обычно запросы на новые иконки поступают в сообществе Font Awesome в GitHub. Хотите сделать запрос на новые иконки? Вот некоторые советы как это можно сделать:
- Пожалуйста, будьте вежливым. Font Awesome — место доброжелательности.
- Пожалуйста, воспользуйтесь поиском, чтобы удостовериться, что ваш запрос не является повторным. Если запрос такой уже существует, пожалуйста, плюсаните его.
- Пожалуйста, делайте под каждую иконку отдельный запрос, не считая только тех моментов, когда вам требуются строго одинаковые значки (например, thumbs-up/thumbs-down).
- Заранее вас благодарю, если в запросе вы укажете:
- Заголовок вашего запроса —
Icon request: icon-name
(например,Icon request: icon-car
). - Опишите ситуации, требующие вашу иконку. Как вы планируете её использовать?
- Приложите один или два цветных изображения, чтобы донести вашу идею до меня.
- Заголовок вашего запроса —
- Запросы конкретных вещей: делать такие вещи иконкой очень трудно, чтобы это потом не разочаровало. Проще сделать улыбающийся смайлик.
Сообщение об ошибках
Нашли ошибку в работе Font Awesome? Можете сообщите о ней в репозитории GitHub. Но будьте добры соблюдать правила:
- Пожалуйста, будьте вежливым. Font Awesome — место доброжелательности.
- Пожалуйста, воспользуйтесь поиском, чтобы удостовериться, что нет еще сообщения о данной ошибке.
- Перед тем, как написать сообщение, пожалуйста, прочитайте правила создания сообщений об ошибках от Николаса Галлахера (Nicolas Gallagher).
- После того, как вы выполнили предыдущие пунткы, можете смело сообщать об ошибке.
Исправление ошибок
Нашли решение проблемы в Font Awesome? Хотите сообщить об этом решении? Вот несколько вещей, которые надо запомнить:- Пожалуйста, не присылайте новые иконки.
- Пожалуйста, присылайте все решения в ветку с постфиксом *-wip.
- Все решения, присланные на ветку master, будут заакрыты со ссылкой на правила.
- После выполнения предыдущих пунктов, можете смело сообщать о решении ошибки.
Будущее проекта
Хотите отслеживать то, что планируется в Font Awesome? Для этого есть полезная ссылка в репозиторий проекта в GitHub.
Благодарности
Спасибо @robmadole и @supercodepoet за обзор дизайна иконок, советы, помощь по Jekyll, а также спасибо всем окружающим гавнюкам.
ОГРОМНОЕ спасибо @gtagliala за проделанную фантастическую работу над репозиторием Font Awesome в GitHub.
Спасибо MaxCDN за обеспечение превосходной доступности BootstrapCDN, самый быстрый и простой способ начать работать с Font Awesome.
Отблагодарите меня
Я надеюсь, что вы считаете, Font Awesome реально прекрасен. Я потратил сотни часов, чтобы моим проектом могло пользоваться все интернет-сообщество. Если вы желаете, то есть несколько способов отблагодарить меня.
Советуйте меня в GittipGittip — отличный способ показать разработчику, что вы цените его работу.
Мой список желаний на Amazon
Или выбрать что-то прямо из моего списка желаний. Подарочные карты прекрасны =).
Как использовать и оформлять иконки с помощью CSS?
- Необходимые шаги для использования иконок
- Использование иконок Font Awesome
- Масштаб иконок Font Awesome и их цвет
- Использование иконок с кнопками
- Добавление эффекта тени к иконкам
- Использование иконок Font Awesome в списке
- Анимация иконок Font Awesome
- Поворот иконок Font Awesome
Для того, чтобы использовать иконки, вам необходимо следовать этим шагам:
Скопируйте код, предоставленный веб-страницей Font Awesome, и вставьте в <head> каждого шаблона или страницы, где хотите использовать иконки Font Awesome.
Для использования последней версии иконок this page смотрите эту страницу .
Здесь мы используем версию 5.8.1 link rel, чтобы определить связь между текущим документом и файлом со ссылкой:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
Загрузка и установка не требуются.
Иконки должны быть расположены внутри элемента <body>. Найдите необходимую вам иконку и скопируйте ее HTML код.
Код иконки будет выглядеть следующим образом:
<i></i>
Можно легко изменить размер и цвет иконки и даже добавить к ней тени, используя только CSS. Иконки также могут быть перемещаемы и анаимируемы.
Иконки могут находится фактически где угодно, если используете стилевой префикс (fa) и название иконки. Font Awesome используется вместе со строчными элементами, и рекомендуется придерживаться к ним при проекте с согласованным HTML элементом.
Для добавления иконок на веб-страницы допустимо использование тегов <i> и <span>. Если вам не нравится, что сайт предоставляет вам код с тегом <i>, вы можете заменить его на <span>.
Для ссылки на иконку вам необходимо использовать имя иконки с префиксомpan fa- и предпочитаемый вами стиль с соответствующим префиксом (fas, fal, far или fab).
Используйте элемента <i> для ссылки на элемент:
<i></i>
Или используйте элемент span:
<span></span>
Префикс fa устарел в версии 5. Новые префиксы по умолчанию fas (сплошной стиль), fab (бренды), far (обычный стиль) и fal (тонкий стиль).
Пример
<!DOCTYPE html> <html> <head> <title>Иконки Font Awesome</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> </head> <body> <h3>Пример иконок</h3> <p>Камера</p> <i></i> <p>Машина</p> <i></i> <p>Конверт</p> <i></i> </body> </html>
Попробуйте сами!
Иконки наследуют размер шрифта их родительского контейнера, чтобы соответствовать любому тексту, который может быть использован вместе с ними. Можно увеличить или уменьшить масштаб иконок относительно унаследованного размера шрифта с помощью таких классов, как fa-xs, span>fa-sm, fa-lg, fa-2x и др.
Что касается цвета, он может быть установлен с помощью CSS свойства color. Просто необходимо установить иконки внутри элемента <div> и задать для него цвет в стиле, или просто установить стиль для элемента <i>.
Пример
<!DOCTYPE html> <html> <head> <title>Иконки Font Awesome</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <style> div { color: #1c87c9; } </style> </head> <body> <h3>Пример иконок с указанными размерами и цветами</h3> <div> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </body> </html>
Попробуйте сами!
Смотрите детали:
Также возможно добавить стиль непосредственно к размеру иконки, устанавливая font-size во внешнем стиле иконки или в стилевом атрибуте HTML элемента, который ссылается на иконку.
Пример
<!DOCTYPE html> <html> <head> <title>Иконки Font Awesome</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <style> i { color: #8ebf42; } .star { font-size: 2em; } </style> </head> <body> <h3>Пример иконок с установленными размерами шрифта и цвета</h3> <div> <p>Иконка с размером по умолчанию.</p> <i></i> <p>Font-size: 2em;</p> <i></i> </div> </body> </html>
Попробуйте сами!
Вы можете также добавить иконки при создании кнопок. Просто вставьте иконку в элемент <button>.
Пример
<!DOCTYPE html> <html> <head> <title>Кнопки с иконками</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <style> button { border: none; border-radius: 5px; color: #ffffff; padding: 10px 14px; font-size: 16px; cursor: pointer; } button:hover { background-color: #666666; box-shadow: 2px 4px #999999; } .btn { background-color: #999999; } .home { background-color: #ff6347; } .menu { background-color: #008080; } .about { background-color: #e6b800; } </style> </head> <body> <h3>Кнопки с иконками</h3> <p>Icon buttons:</p> <button> <i></i> </button> <button> <i></i> </button> <button> <i></i> </button> <p>Кнопки с иконками текстов и разными цветами:</p> <button> <i></i> Home </button> <button> <i></i> Menu </button> <button> <i></i> About </button> </body> </html>
Попробуйте сами!
Для добавления эффектов тени к иконкам необходимо CSS свойство text-shadow.
Установите тень для того элемента, к которому относится иконка:
Пример
<!DOCTYPE html> <html> <head> <title>Иконки Font Awesome</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <style> i { color: #1c87c9; text-shadow: 2px 2px 4px #00ffff; font-size: 30px; } </style> </head> <body> <h3>Пример иконок с тенью текста</h3> <div> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </body> </html>
Попробуйте сами!
С помощью иконок можно сделать много всего! Можете оформлять ваши HTML списки в виде декоративных маркеров.
Используйте класс fa-ul для элемента <ul> и класс fa-li для элемента <li>, чтобы заменить маркеры по умолчанию в неупорядоченном списке.
Пример
<!DOCTYPE html> <html> <head> <title>Иконки Font Awesome</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <style> span { color: #8ebf42; } </style> </head> <body> <h3>Иконки в примере со списком</h3> <ul> <li> <span> <i></i> </span>Элемент списка 1 </li> <li> <span> <i></i> </span>List item 2 </li> <li> <span> <i></i> </span>Элемент списка 3 </li> <li> <span> <i></i> </span>Элемент списка 4 </li> </ul> </body> </html>
Попробуйте сами!
Используйте класс fa-spin для плавного вращения иконки и класс fa-pulsefa-spinner.
Будет выглядеть таким образом:
<i></i>
Смотрите пример, чтобы увидеть разницу между классами fa-spin и fa-pulse:
Пример
<!DOCTYPE html> <html> <head> <title>Иконки Font Awesome</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <style> i { color: #1c87c9; text-shadow: 2px 2px 4px #00ffff; font-size: 30px; } </style> </head> <body> <h3>Иконки с классами fa-spin и fa-pulse</h3> <p>Spinner spin:</p> <i></i> <p>Spinner pulse:</p> <i></i> </body> </html>
Попробуйте сами!
Пример с несколькими анимированными иконками:
Пример
<!DOCTYPE html> <html> <head> <title>Иконки Font Awesome</title> <link rel="stylesheet" href="https://use. fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <style> i { color: #1c87c9; text-shadow: 2px 2px 4px #00ffff; font-size: 30px; } </style> </head> <body> <h3>Анимированные иконки</h3> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> </body> </html>
Попробуйте сами!
Довольно часто для дополнительного дизайна вам может понадобиться поворачивать, отражать иконку.
Для произвольного поворота и отражения иконок используйте классы fa-rotate-* и fa-flip-*.
Пример
<!DOCTYPE html> <html> <head> <title>Иконки Font Awesome</title> <link rel="stylesheet" href="https://use. fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <style> i { color: #1c87c9; text-shadow: 2px 2px 4px #00ffff; font-size: 30px; } </style> </head> <body> <h3>Поворот иконок</h3> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> </body> </html>
Попробуйте сами!
Смотрите градус и детали вращения:
значков CSS — javatpoint
следующий → ← предыдущая Значки могут быть определены как изображения или символы, используемые в любом компьютерном интерфейсе и относящиеся к элементу. Это графическое представление файла или программы, которое помогает пользователю быстро определить тип файла. Использование библиотеки значков — самый простой способ добавить значки на нашу HTML-страницу. Иконки библиотеки можно форматировать с помощью CSS. Мы можем настроить значки в соответствии с их цветом, тенью, размером и т. д. Имеются некоторые библиотеки значков, такие как значки Bootstrap, значки Font Awesome, и значки Google , которые можно легко использовать в CSS. Нет необходимости устанавливать или скачивать упомянутые выше библиотеки. Обсудим вышеупомянутые библиотеки иконок. Иконки Font AwesomeЧтобы использовать эту библиотеку на нашей HTML-странице, нам нужно добавить следующую ссылку в раздел . Давайте разберемся с иллюстрацией. Пример<голова> Библиотека Font Awesome<я>я> <я>я> <я>я> <я>я> <яя> тело> Протестируйте сейчасИконки начальной загрузкиКак и в случае с библиотекой шрифтов awesome, мы можем добавить значки начальной загрузки на нашу HTML-страницу, используя ссылку, указанную ниже в разделе . Пример<голова> Значки начальной загрузки<я>я> <я>я> <я>я> <я>я> <я>я> <я>я> <я>я> тело> Протестируйте сейчасИконки GoogleПодобно вышеупомянутым библиотекам, мы можем добавить его на нашу HTML-страницу, просто добавив ссылку, указанную ниже в разделе . ПримерПример<голова> Значки Googleоблако вложение компьютер избранное трафик тело> Протестируйте сейчасNext TopicCSS justify-content ← предыдущая следующий → |
Иконки Tailwind CSS — Flowbite
Иконки, используемые в FlowBite, представляют собой иконки героев на основе SVG, созданные одним из создателей Tailwind CSS.
<дел> w3.org/2000/svg">путь> w3.org/2000/svg"> w3.org/2000/svg">
Кроме того, вы можете ознакомиться со списком 10 лучших библиотек значков SVG с открытым исходным кодом.
←Цвета Оптимизация→Получить больше обновлений…
Хотите получать уведомления, когда в Flowbite добавляется новый компонент? Подпишитесь на нашу рассылку, и вы будете в числе первых, кто узнает о новых функциях, компонентах, версиях и инструментах.