Все иконки: Все иконки Font Awesome
21.03.2023 
Разное
Примеры использования Font Awesome
После того, как вы подключили Font Awesome к своему проекту, иконки можно вызывать с помощью тега <i>.
Некоторые примеры были позаимствованы из документации Bootstrap.
The following examples are kept simple and assume use of Font Awesome CDN, which provides auto-accessibility support. If you are not using the Font Awesome CDN, please see the manual accessibility examples and read more about making your icons more awesome for all users
Пример: Базовые иконки fa-camera-retro
Вы можете разместить иконки Font Awesome в любом месте, используя в имени класса префикс fa и название иконки. Font Awesome разработан так, чтобы он мог быть использован в строковых элементах (мы любим использовать тег <i> так как он очень короткий, но использование тега <span> будет семантически более правильно).
<i></i> fa-camera-retro
- Пример: Базовые иконки Если вы меняете значение свойства font-size у контейнера иконок, то иконки станут больше.
Такое поведение происходит и с цветом, тенью и другими свойствами, которые могут наследоваться.
Такое поведение происходит и с цветом, тенью и другими свойствами, которые могут наследоваться.fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
Для увеличения размеров иконок в родительском элементе используйте классы 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
- Если ваши иконки обрезаны сверху и снизу, то удостоверьтесь в правильном значении свойства line-height.
Главная Библиотека Приложения Настройки
Используйте класс fa-fw для того, чтобы задать фиксированную ширину иконкам.
Прекрасно подходит для тех случаев, когда различная ширина иконок мешает правильному выравниванию. Особенно полезно при использовании иконок в навигации и списках групп.
<div> <a href="#"><i aria-hidden="true"></i> Главная</a> <a href="#"><i aria-hidden="true"></i> Библиотека</a> <a href="#"><i aria-hidden="true"></i> Приложения</a> <a href="#"><i aria-hidden="true"></i> Настройки</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 и fa-pull-right или fa-pull-left для выделения цитаты или подключения иконки статьи.
<i aria-hidden="true"></i> ...Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца... Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я.
Пример загрузки (с fa-spinner icon) Пример загрузки (с fa-circle-o-notch icon) Пример загрузки (с fa-refresh icon) Пример загрузки (с fa-cog icon) Пример загрузки (с fa-spinner icon)
Используйте класс fa-spin, чтобы заставить вращаться любую иконку, и используйте класс fa-pulse, чтобы заставить вращаться иконку по 8 шагов. Также работает с классами fa-spinner, fa-refresh, и fa-cog.
<i></i> <span>Загрузка...</span> <i></i> <span>Загрузка...</span> <i></i> <span>Загрузка...</span> <i></i> <span>Загрузка...</span> <i></i> <span>Загрузка...</span>
На заметку: Некоторые браузера на нескольких платформах имеют проблемы с анимацией иконок, что дает эффект «безудержного веселья» у иконки. Читайте проблему #671 для ознакомления с ней и изучения возможных решений.
На заметку: Анимация CSS3 не поддерживается в IE8 — IE9.
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
Чтобы произвольно поворачивать и зеркалить иконки, используйте классы fa-rotate-* and fa-flip-*.
<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> fa-flip-vertical
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban на fa-camera
Чтобы сделать группу из иконок, используйте класс fa-stack для родителя, класс fa-stack-1x используйте для задания стандартного размера иконки, а класс fa-stack-2x
fa-inverse может быть использован для присваивания альтернативного цвета иконке. Также вы можете использовать классы увеличения для управления размерами иконок.<span> <i></i> <i></i> </span> fa-twitter на fa-square-o<br> <span> <i></i> <i></i> </span> fa-flag на fa-circle<br> <span> <i></i> <i></i> </span> fa-terminal на fa-square<br> <span> <i></i> <i></i> </span> fa-ban на fa-camera
Примеры для Bootstrap 3
Удалить Настройки
Font Awesome
Версия 4.
7.0
Font Awesome прекрасно работает со всеми компонентами Bootstrap.
<a href="#">
<i></i> Удалить</a>
<a href="#">
<i></i> Настройки</a>
<a href="#">
<i></i> Font Awesome<br>Версия 4.7.0</a>
<div>
<a href="#">
<i title="Align Left"></i>
</a>
<a href="#">
<i title="Align Center"></i>
</a>
<a href="#">
<i title="Align Right"></i>
</a>
<a href="#">
<i title="Align Justify"></i>
</a>
</div>
<div>
<span><i></i></span>
<input type="text" placeholder="Ваш Email">
</div>
<div>
<span><i></i></span>
<input type="password" placeholder="Пароль">
</div>
<div>
<a href="#"><i></i> Пользователь</a>
<a data-toggle="dropdown" href="#">
<span title="Toggle dropdown menu"></span>
</a>
<ul>
<li><a href="#"><i></i> Редактировать</a></li>
<li><a href="#"><i></i> Удалить</a></li>
<li><a href="#"><i></i> Забанить</a></li>
<li></li>
<li><a href="#"><i></i> Дать права администратора</a></li>
</ul>
</div>
Пользовательский CSS
Всё, что вы можете сделать со шрифтами с помощью CSS, вы сможете сделать и с Font Awesome.
Пример рейтинга (позаимствовано из CSS Tricks)
Общедоступность
Обновление… Сохранение. Держитесь крепче!
Уровень заряда: 50%
Немного о наших мыслях об общедоступности иконок. Если иконка используется для декорирования или отображения бренда, то они не должны быть объявлены общедоступно, тк они влияют на приложения, читающие сайты в слух. Если иконка передает смысл содержания текста в контексте интерфейса, то убедитесь в том, что этот смысл также передается и вспомогательными технологиями, дополнительным текстом или скрытым блоком.
<a href="path/to/settings" aria-label="Настройки"> <i aria-hidden="true"></i> </a> <a href="path/to/settings" aria-label="Удалить"> <i aria-hidden="true"></i> </a> <a href="#navigation-main" aria-label="Перейти к основному меню"> <i aria-hidden="true"></i> </a>
<i aria-hidden="true"></i> <span>Обновление.
..</span>
<i aria-hidden="true"></i>
<span>Сохранение. Держитесь крепче!</span>
<div> <span><i aria-hidden="true"></i></span> <input type="text" placeholder="Ваш email"> </div> <div> <span><i aria-hidden="true"></i></span> <input type="password" placeholder="Пароль"> </div>
<a href="path/to/shopping/cart" aria-label="Посмотреть 3 предмета в вашей корзине"> <i aria-hidden="true"></i> </a>
<i aria-hidden="true"></i> <span>Уровень заряда: 50%</span>
html — SVG-спрайты. Не все иконки грузятся
Использую на сайте svg-спрайты. Иконок достаточно много (около 100), и с отображением 99% иконок нет никаких проблем. Но некоторые не подгружаются, или подгружаются на одной странице, а на другой — нет.
В консоли выводит ошибку 500 (Internal Server Error) (именно на подгрузку спрайта).
Есть предположения с чем это может быть связано?
Приведу пример конструкции svg-спрайта:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol viewBox="0 0 56 64">
...
</symbol>
</defs>
</svg>
Вставляю в html по айдишнику:
<svg> <use xlink:href="images/svgdefs.svg#icon-apple"></use> </svg>
Код неподгружаемой иконки (сгенерен через icomoon.io):
<symbol viewBox="0 0 40 40">
<path d="M6.66 16l13.34 8 20-12-20-12-20 12h30v4h-13.34zM0 16v16l4-4.44v-9.16l-4-2.4zM20 40l-14-8.4v-12l14 8.4 14-8.4v12l-14 8.4z"></path>
</symbol>
- html
- css
- вёрстка
- svg
- svg-спрайт
2
Вот здесь
подробно разбиралась тема добавления иконок из спрайта.
Update
Данная конструкция файла спрайта — избыточна
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol viewBox="0 0 56 64">
...
</symbol>
</defs>
</svg>
Секция <defs> ... </defs> выполняет в svg роль библиотечного хранилища.
В этот раздел обычно помещают готовые фрагменты кода, которые могут быть использованы многократно и пока фрагмент кода не вызван с помощью команды<use xlink:href=#.. ></use> он не виден и не участвует в ходе выполнения программы.
Теги <symbol> ... </symbol> выполняют ту же роль, что и <defs> — скрывают фрагмент кода до вызова командой <use>
Главное отличие <defs> от <symbol> — в возможности у тега символа использовать дополнительный viewBox, который дает возможность дополнительного масштабирования и позиционирования элементов SVG.
У CHRIS COYIER есть прекрасная статья на эту тему.
4
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Визуальный язык, понятный всем
🐓 Воссоединитесь с природой и насладитесь здоровой и питательной пищей.
Встречайте новый набор «Ферма»! Подробнее в блоге.
закрыть
GLYPHICONS ® — это точно подготовленные монохроматические значки и символы, созданные с упором на простоту и удобство ориентации.
Отдельные наборы иконок Коллекция наборов иконок Новинка
Базовый набор
Сочетание основных значков и символов для повседневной дизайнерской работы. 1060+ иконок за $149
Перейти к базовому набору микросайтов
Набор полуросликов
Младший брат Базового набора, предназначенный для всех мелких графических объектов. 330+ иконок за 45 долларов
Перейти к микросайту Halflings set
Набор типов файлов
Коллекция значков наиболее распространенных типов файлов. 100+ иконок за 15 долларов
Перейти к микросайту набора типов файлов
Набор смайликов
Усильте свое цифровое общение эмоциями.
100+ иконок за 15 долларов
Продолжить набор смайликов на микросайте
Набор людей
Сделайте свой дизайн более человечным. 120+ иконок за 15 долларов
Микросайт «Продолжить для людей»
Настроение
Сохраняйте здоровье разума, тела и духа. 100+ иконок за 15 долларов
Микросайт «Продолжить думать»
Набор погоды
Что взять с собой солнцезащитные очки или зонтик? 110+ иконок за 15 долларов
Перейти к микросайту установки погоды
Набор камер
Видео может передавать эмоции, как и все остальное. 120+ иконок за 15 долларов
Перейти на микросайт набора камер
Набор заражения
Яркие значки для трудных времен. Оставайтесь в безопасности и будьте здоровы. 80+ иконок за 10 долларов
Перейти на микросайт набора заражений
Набор стрел
Не заблудитесь и помогите своим пользователям не сбиться с пути.
1030+ иконок за 25 долларов
Перейти к микросайту Arrows set
Ферма набор
НовыйВоссоединитесь с природой и насладитесь здоровой и богатой питательными веществами пищей. 110+ иконок за 15 долларов
Продолжить микросайт фермы
Коллекция наборов иконок
Те же лицензия и преимущества, как если бы вы купили любой отдельный набор, но со сниженной ценой в качестве благодарности за покупку нескольких наборов одновременно.
Core
219 $
$ 159
Купить коллекцию Эти три набора создают прочное ядро, на которое вы можете положиться в своей повседневной работе.
Наборы иконок внутри
- Базовый набор 149 $
- Набор полуросликов 45 $
- Набор стрел 25 $
Расширенный
249 $
$ 169
Купить коллекцию Расширенный выбор наборов расширяет ваши возможности при разработке дизайна с помощью значков.
Наборы иконок внутри
- Базовый набор $149
- Набор полуросликов 45 $
- Набор типов файлов $15
- Набор смайликов 15$
- Набор стрел 25 $
Комплексный
334 $
$ 199
Купить коллекцию Полная коллекция всех доступных в настоящее время наборов иконок по самой выгодной цене.
Наборы иконок внутри
- Базовый комплект 149 $
- Набор полуросликов 45 $
- Набор типов файлов $15
- Набор смайликов 15$
- Набор людей $15
- Настроение $15
- Набор погоды 15 $
- Набор камер $15
- Набор для заражения 10 $
- Набор стрел 25 $
- Фермерский набор $15
Каждый набор в коллекции можно загрузить отдельно, и он содержит ту же обычную лицензию и преимущества, что и отдельные наборы, например: единовременный платеж, пожизненное использование и бесплатные обновления для каждого набора.
Единственная разница между отдельными наборами и коллекциями заключается в том, что вы получаете значительно лучшую цену при покупке нескольких наборов в коллекции. Подробнее о коллекциях вы можете прочитать в блоге, а если возникнут вопросы, свяжитесь со мной.
Одна лицензия, чтобы управлять ими всеми
Честная сделка. Никаких подписок и скрытых платежей. Обычная лицензия предоставляется автоматически с каждым набором иконок или коллекцией.
| Особенности | Обычная лицензия | |
|---|---|---|
Обычная лицензия очень выгодна и позволяет многократно использовать иконки в нескольких проектах. Если вы размещаете свой заказ как компания, вы даже можете одолжить иконки своим официально нанятым сотрудникам, насколько это круто? Если у вас все еще есть какие-либо сомнения или вопросы, пожалуйста, свяжитесь со мной. | ||
| Разовый платеж | ||
| Коммерческое или личное использование | ||
| Использование без указания авторства | ||
| Одна лицензия на компанию | ||
| Бессрочная лицензия | ||
| Бесплатные обновления | ||
| Растровые файлы | ||
| Векторные файлы | ||
| Веб-поиск между значками | ||
| Веб-инструмент SVG | ||
Иконки, у которых есть спина
Отлично подходит для мобильных приложений, веб-сайтов, печатных материалов и т.
д. Они созданы для того, чтобы служить вам всегда, когда вам нужно.Коммерческое и личное использование
Обычная лицензия покрывает потребности клиентов любого размера, с неограниченным количеством проектов и пользователей.
Пожизненная лицензия Fair
Никаких скрытых платежей или подписок, просто скачайте свои файлы и используйте их столько, сколько захотите.
Консистентные наборы
Это семейство держится вместе, а значки во всех наборах аккуратно сбалансированы, чтобы работать бок о бок.
Включены будущие обновления
Купите любой набор иконок сейчас, и вы получите все его обновления позже, без дополнительной оплаты.
Доверенный
Используется самыми известными мировыми брендами, государственными учреждениями и независимыми разработчиками с 2010 года.
Различные форматы файлов
От растровых файлов PNG для iOS до оптимизированных векторных SVG для Интернета, готовых для любого типа проекта.
Сделано до мелочей
Каждая иконка тщательно выровнена по пиксельной сетке, и чем больше вы увеличиваете масштаб, тем лучше они выглядят.
Вечные формы
Все значки сделаны так, чтобы соответствовать модным дизайнерским тенденциям и быть легко узнаваемыми во всем мире.
Готов практически ко всему
Каждый набор содержит файлы с последовательными именами, экспортированные в широкий выбор форматов файлов, всегда организованные в одной и той же файловой структуре.
Ай
Adobe Illustrator — это формат, являющийся отраслевым стандартом. Все иконки в одном файле Ai, с отсортированными и правильно названными слоями.
СВГ
Масштабируемая векторная графика. Быстрый и простой в использовании. Все значки в одном файле + каждый значок в виде SVG-файла, готового для Интернета.
Portable Document Format, содержащий векторы. Все значки в одном файле PDF + каждый значок в виде отдельного файла.
EPS
Инкапсулированный PostScript может быть старомодным, но вы все еще можете на него рассчитывать. Все иконки в одном файле EPS.
PNG
Portable Network Graphics — это формат растрового изображения без потерь. Каждая иконка стандартного размера в отдельном файле.
@2x PNG
Изображения PNG в двойном размере. Масштабный коэффициент 2.0 для iOS или когда вам нужна поддержка дисплея с высоким разрешением.
@3x PNG
Изображения PNG в три раза больше оригинала. Они отлично подходят для iPhone X, iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus и других устройств с коэффициентом масштабирования 3.0.
Попробуйте их бесплатно
Не покупайте кота в мешке и скачайте набор Contagion или новый набор Arrows совершенно бесплатно с лицензией CC.
Перейти на микросайт набора заражений
Перейти на микросайт Arrows set
Теперь доступно в коллекциях
Купите отдельный набор иконок или всю коллекцию, чтобы получить выгодную цену при покупке наборов иконок оптом.
Отдельные наборы иконок Коллекция наборов иконок Новинка
Иконки Themify — более 320 бесплатных иконок для веб-дизайна и приложений -стрелки-вертикальные
ti-стрелки-горизонтальные
ti-угол-вверх
ti-угол-вправо
ti-угол-влево
ti-угол-вниз
ti-угол-двойной вверх
3 ti-угол-двойной-правый
ti-angle-double-left
ti-angle-double-down
ti-move
ti-fullscreen
ti-arrow-top-right
ti-arrow-top-left
ti-arrow -круг-вверх
ti-стрелка-круг-вправо
ti-стрелка-круг-влево
ti-стрелка-круг-вниз
ti-стрелка-угол
ti-split-v
ti-split -v-alt
ti-split-h
ti-рука-указатель вверх
ti-рука-указатель-вправо
ti-рука-указатель-влево
ti-hand-point-down
ti-back-right
ti-back-left
ti-exchange-vertical
Значки веб-приложений -Аlt
TI-направление
TI-направление ALT
TI-USER
TI-LINK
TI-UNLINK
TI-TRASH
TI-Target
TI-TAG
TI-DESKTOP
ti-планшет
ti-mobile
ti-email
ti-star
ti-spray
ti-signal
ti-корзина
ti-корзина-полная
ti-настройки
ti-search
ti-out
0om-in
ti-0zoom
TI-CUT
Ti-Ruler
Ti-Ruler-ALT-2
Ti-Ruler-Pencil
Ti-Ruler-ALT
Ti-Bookmark
Ti-Bookmart-Alt
TI-RelAd.
ti-plus
ti-minus
ti-close
ti-pin
Ti-Pencil
Ti-Pencil-Alt
Ti-Paint-Roller
Ti-Paint-Bucket
Ti-Na
Ti-Medall
Ti-Medall-Alt
TI-Marker
TI -Маркера-Альт
Ti-Lock
Ti-Unlock
Ti-Location-arrow
Ti-Layout
Ti-Layers
Ti-Layers-Alt
Ti-Key
Ti-Image
ti-heart
ti-heart-broken
ti-hand-stop
ti-hand-open
Ti-Hand-Drag
Ti-FLAG
Ti-FLAG-ALT
TI-FLAG-ALT-2
TI-EYE
TI-IMPORT
Ti-Export
TI-CUP
Ti-Crown
Ti-Comments
Ti-Comment
Ti-Comment-ALT
TI-That
Ti-Clip
TI-Check
Ti-Ceck-Box
TI-Camera
TI TI. -объявление
ti-brush
ti-brush-alt
ti-palette
Ti-Briefcase
Ti-Bolt
Ti-Bolt-Alt
Ti-Blackboard
Ti-Bag
Ti-World
Ti-Wheelchair
TI-CAR
TI-TRUCK
TI
TI-CARTI-TRUCK
TI
TI
TI
TI
TI
TI
TI
TI-CAR -timer
ti-ticket
ti-thumb-up
ti-thumb-down
ti-stats-up
ti-stats-down
ti-shine
3
ti-shine
3
-shift-left
ti-shift-right-alt
ti-shift-left-alt
Ti-Shield
Ti-Notepad
Ti-Server
Ti-Pulse
TI-Printer
TI-Power-Off
TI-Plug
TI-Pie-Chart
TI-Panel
Ti-Package
TI-MUSIC
TI-MUSIC-ALT
TI-MOUSE
TI-MOUSE-ALT
TI-Money
TI-Microphone
Ti-Menu
Ti-Men-Alt
ti-map
ti-map-alt
ti-location-pin
ti-лампочка
Ti-Info
Ti-Infinite
Ti-ID-Badge
Ti-Hummer
Ti-Home
Ti-Help
Ti-Heemphone
Ti-Harddrives
TI-HARDDRIVE
TI-HARDDRIVE -gift
Ti-Game
Ti-Filter
Ti-Files
Ti-File
Ti-Zip
Ti-Colder
Ti-envelope
Ti-Dashboard
Ti-Cloud
TI.
Leave a Comment