Font awesome что это

Font Awesome

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

Преимущества

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

Недостатки

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

• Установка
• Работа с иконками
• Работа с Bootstrap
• Сборка иконок

Font Awesome

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

Один шрифт, 675 иконок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Доступность

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

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

Спасибо @robmadole и @supercodepoet за обзор дизайна иконок, советы, помощь по Jekyll, а также спасибо всем окружающим гавнюкам.

ОГРОМНОЕ спасибо @gtagliala за проделанную фантастическую работу над репозиторием Font Awesome в GitHub.

Спасибо MaxCDN за обеспечение превосходной доступности BootstrapCDN, самый быстрый и простой способ начать работать с Font Awesome.

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

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

Что такое шрифт Awesome

Шрифт «Font Awesome» – это набор иконок, который используется для веб-разработки и создания интерфейсов. В него входит более 26 000 векторных иконок, которые можно легко встраивать в веб-страницы и приложения, используя CSS-классы.

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

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

Преимущества шрифта Font Awesome

• Это действительно шрифт. Существуют и другие способы отображения значков и иконок. Например, можно использовать отдельные изображения или CSS-спрайты. Однако Awesome к ним не относится, так как это самый настоящий шрифт, который помогает улучшить панель поиска, навигацию и любое другое место, где уместны иконки, логотипы или символы .
• Его легко адаптировать и стилизовать. Использование этого шрифта позволяет сделать иконки настолько четкими, насколько позволяет ваше устройство. Благодаря этому не нужно беспокоиться о подготовке графики к Retina-дисплеям, поскольку Font Awesome в любом случае предоставит вам высокое качество значков. В век адаптивного дизайна это важно как никогда прежде.

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

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

Виртуальный хостинг

Если у вас ещё нет подходящего хостинга для вашего сайта, обратите внимание на виртуальный SSD хостинг RU-CENTER. Он поддерживает PHP , MySQL и подходит для сайтов любой сложности.

Приобретя эту услугу у нас, вы также получите доступ к последним версиям самых популярных систем управления контентом: WordPress, Joomla, 1С–Битрикс, Drupal, ModX, OpenCart.

Независимо от того, является ли ваш проект личным блогом или высоконагруженным корпоративным ресурсом, хостинг RU-CENTER предоставит вам всё необходимое для его поддержки.

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

Есть два варианта того, как можно его получить:

Способ 1. Через официальный сайт

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

Как правило, бесплатной версии (Free) достаточно, но вы также можете рассмотреть платные варианты (Pro) с дополнительными иконками и функциональностью.

Затем выполните распаковку архива и скопируйте содержимое папок «/css» и «/webfonts» в свою веб-директорию (например, в папку /css/awesome).

После этого добавьте следующую строку в тег вашего сайта, чтобы подключить стили Awesome:

Способ 2. CDN Font Awesome

Подключите Font Awesome с помощью CDN (Content Delivery Network). Это самый простой способ, и он не требует загрузки и установки файлов на вашем сервере.

Для этого просто вставьте следующий код в ваш HTML-файл:

Важно! URL может меняться в зависимости от выбранной вами версии Font Awesome. Наш код подходит для последней доступной версии 6.4.4.

У такого подхода есть несколько плюсов:

+ Сайт будет работать быстрее благодаря параллельной загрузке данных с разных серверов – сайт будет загружаться с вашего хостинга, а шрифты – из сети Awesome.

+ Кроме того, если вы уже посещали сайты со шрифтом Awesome, он уже есть в кэше вашего браузера.

Однако у этого метода есть и свои недостатки:

– Он не подходит для автономных сайтов (без доступа к интернету).

– Создает зависимость от CDN сети Awesome.

Поэтому первый способ считается более универсальным и предпочтительным. Но выбор остается за вами.

Какую версию Font Awesome лучше выбрать

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

Кроме того, на этой же странице можно выбрать Font Awesome 5, у которого еще больше версий – вплоть до 5.15.4.

На сентябрь 2023 года последний доступный релиз – это 6.4.2.

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

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

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

Библиотека иконок Font Awesome: где найти

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

Чтобы найти конкретную иконку, воспользуйтесь поиском по названию или ключевым словам.

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

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

1. С помощью HTML-тега

Вставьте тег с классом, который соответствует нужной иконке. Например, если вы хотите использовать иконку «сердце», используйте следующий код:

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

• «fas» указывает на стиль иконки – Solid, то есть «сплошной».
• Для отображения иконки нужен класс «fa».
• «fa-heart» – это и есть иконка «сердца».

1. С помощью тегов , ,

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

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

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

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

Этот код поместит иконку «облака» внутрь элемента . Как и в предыдущем случае, вы можете применить дополнительные стили к , чтобы настроить его.

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

Здесь содержит иконку поиска и текст «Поиск». Пользователь может нажать эту кнопку, чтобы начать поиск чего бы то ни было.

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

Это – лучший способ начать день!

Когда браузер обработает этот HTML-код, он заменит иконкой чашки кофе в тексте. Таким образом, вы получите следующий результат:

Настройка размеров иконок Font Awesome с помощью классов – это удобный способ адаптировать иконки под дизайн вашего веб-сайта.

Для изменения размера иконок вы можете использовать классы, которые начинаются с fa- и затем указать размер:

• fa-xs – уменьшает размер иконки до минимального.
• fa-sm – устанавливает маленький размер иконки.
• fa-lg – устанавливает большой размер иконки.
• fa-2x, fa-3x и так далее – указывают конкретный множитель размера. Соответственно, «fa-2x» удвоит размер иконки, а «fa-3x» утроит его.

В первом случае иконка звезды будет увеличена вдвое. Во втором – иконка облака просто отобразится в большом размере.

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

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

Для изменения цвета иконок вы можете использовать стили CSS, добавив атрибут «style» к элементу и указав цвет с помощью свойства «color».

В первом коде для иконки звезды задается золотой цвет, а во втором – белый для иконки облака.

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

Изменение отступов

Чтобы установить отступ для иконки Font Awesome, вы можете использовать свойство «margin» в CSS.

• margin-top – отступ сверху;
• margin-bottom – отступ снизу;
• margin-left – отступ слева;
• margin-right – отступ справа.

Этот код устанавливает отступ справа от иконки в десять пикселей.

Вы можете комбинировать иконки с другими тегами и применять к ним дополнительные стили с использованием CSS.

В этом примере иконка почтового конверта (fa-envelope) помещена внутрь вместе с текстовой отметкой () – «Написать письмо». Вы можете применить любые стили к контейнеру или элементам внутри него.

Если вы хотите настроить стили иконок, вы можете добавить дополнительные классы или стили CSS к элементам с иконками.

Этим кодом мы установили цвет («red») и размер иконки пользователя («24px»).

Таким образом, мы подключили и настроили Font Awesome на вашем веб-сайте.

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

Font Awesome

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

Работает в IE7

Font Awesome работает в IE7. Мои соболезнования если это важно для Вас.

Отлично подходит для Retina дисплеев

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

Сделан для Twitter Bootstrap

Создан совместно и для использования с Twitter Bootstrap.

Дизайнеры оценят

Установите FontAwesome.otf и посетите страницу копи-паст. Удачи с дизайном.

Поддерживается читалками

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

Что нового в Font Awesome 3.0

Каждый пиксель на месте

Каждая иконка индивидуально перерисована для совместимости со стандартным размером шрифта в Bootstrap’е в 14px.

Собери свой

Спасибо @grantgordon и @johnsmclay, благодаря этим ребятам Вы можете самостоятельно собрать свой комплект из иконок, которые нужны только Вашему проекту.

Наша лицензия лучше

SIL open font license для дизайна, MIT license для кодинга. Ссылка на проект больше не обязательна, НО приветствуется.

40 новых иконок, в новой версии 3.0

Мы сделали все что было запрошено со стороны нашего сообщества Font Awesome GitHub.

Новые стили

Новые стили для анимации, новые классы 2x-4x для увеличения иконок, границы вокруг иконок, и другие вкусности.

Уменьшен размер на 28%

Версия 3.0 весит меньше, несмотря на прирост в 16% в количестве иконок. И супер-маленький размер при самостоятельной сборке.

Новые иконки 3.0

Вы просили, — мы сделали. Font Awesome поставляется с 40 новыми иконками. Вам нужно что-то еще? Запросите новые иконки на странице сообщества. Все будут рады если Вы добавите свои собственные иконки.

• icon-cloud-download
• icon-cloud-upload
• icon-lightbulb
• icon-exchange
• icon-bell-alt
• icon-file-alt
• icon-beer
• icon-coffee
• icon-food
• icon-fighter-jet

• icon-user-md
• icon-stethoscope
• icon-suitcase
• icon-building
• icon-hospital
• icon-ambulance
• icon-medkit
• icon-h-sign
• icon-plus-sign-alt
• icon-spinner

• icon-angle-left
• icon-angle-right
• icon-angle-up
• icon-angle-down
• icon-double-angle-left
• icon-double-angle-right
• icon-double-angle-up
• icon-double-angle-down
• icon-circle-blank
• icon-circle

• icon-desktop
• icon-laptop
• icon-tablet
• icon-mobile-phone
• icon-quote-left
• icon-quote-right
• icon-reply
• icon-github-alt
• icon-folder-close-alt
• icon-folder-open-alt

Web-приложение

• icon-adjust
• icon-asterisk
• icon-ban-circle
• icon-bar-chart
• icon-barcode
• icon-beaker
• icon-beer
• icon-bell
• icon-bell-alt
• icon-bolt
• icon-book
• icon-bookmark
• icon-bookmark-empty
• icon-briefcase
• icon-bullhorn
• icon-calendar
• icon-camera
• icon-camera-retro
• icon-certificate
• icon-check
• icon-check-empty
• icon-circle
• icon-circle-blank
• icon-cloud
• icon-cloud-download
• icon-cloud-upload
• icon-coffee
• icon-cog
• icon-cogs
• icon-comment
• icon-comment-alt
• icon-comments
• icon-comments-alt
• icon-credit-card
• icon-dashboard
• icon-desktop
• icon-download
• icon-download-alt

• icon-edit
• icon-envelope
• icon-envelope-alt
• icon-exchange
• icon-exclamation-sign
• icon-external-link
• icon-eye-close
• icon-eye-open
• icon-facetime-video
• icon-fighter-jet
• icon-film
• icon-filter
• icon-fire
• icon-flag
• icon-folder-close
• icon-folder-open
• icon-folder-close-alt
• icon-folder-open-alt
• icon-food
• icon-gift
• icon-glass
• icon-globe
• icon-group
• icon-hdd
• icon-headphones
• icon-heart
• icon-heart-empty
• icon-home
• icon-inbox
• icon-info-sign
• icon-key
• icon-leaf
• icon-laptop
• icon-legal
• icon-lemon
• icon-lightbulb
• icon-lock
• icon-unlock

• icon-magic
• icon-magnet
• icon-map-marker
• icon-minus
• icon-minus-sign
• icon-mobile-phone
• icon-money
• icon-move
• icon-music
• icon-off
• icon-ok
• icon-ok-circle
• icon-ok-sign
• icon-pencil
• icon-picture
• icon-plane
• icon-plus
• icon-plus-sign
• icon-print
• icon-pushpin
• icon-qrcode
• icon-question-sign
• icon-quote-left
• icon-quote-right
• icon-random
• icon-refresh
• icon-remove
• icon-remove-circle
• icon-remove-sign
• icon-reorder
• icon-reply
• icon-resize-horizontal
• icon-resize-vertical
• icon-retweet
• icon-road
• icon-rss
• icon-screenshot
• icon-search

• icon-share
• icon-share-alt
• icon-shopping-cart
• icon-signal
• icon-signin
• icon-signout
• icon-sitemap
• icon-sort
• icon-sort-down
• icon-sort-up
• icon-spinner
• icon-star
• icon-star-empty
• icon-star-half
• icon-tablet
• icon-tag
• icon-tags
• icon-tasks
• icon-thumbs-down
• icon-thumbs-up
• icon-time
• icon-tint
• icon-trash
• icon-trophy
• icon-truck
• icon-umbrella
• icon-upload
• icon-upload-alt
• icon-user
• icon-user-md
• icon-volume-off
• icon-volume-down
• icon-volume-up
• icon-warning-sign
• icon-wrench
• icon-zoom-in
• icon-zoom-out

Редактор текста

• icon-file
• icon-file-alt
• icon-cut
• icon-copy
• icon-paste
• icon-save
• icon-undo
• icon-repeat

• icon-text-height
• icon-text-width
• icon-align-left
• icon-align-center
• icon-align-right
• icon-align-justify
• icon-indent-left
• icon-indent-right

• icon-font
• icon-bold
• icon-italic
• icon-strikethrough
• icon-underline
• icon-link
• icon-paper-clip
• icon-columns

• icon-table
• icon-th-large
• icon-th
• icon-th-list
• icon-list
• icon-list-ol
• icon-list-ul
• icon-list-alt

Указатели

• icon-angle-left
• icon-angle-right
• icon-angle-up
• icon-angle-down
• icon-arrow-down
• icon-arrow-left
• icon-arrow-right
• icon-arrow-up

• icon-caret-down
• icon-caret-left
• icon-caret-right
• icon-caret-up
• icon-chevron-down
• icon-chevron-left
• icon-chevron-right
• icon-chevron-up

• icon-circle-arrow-down
• icon-circle-arrow-left
• icon-circle-arrow-right
• icon-circle-arrow-up
• icon-double-angle-left
• icon-double-angle-right
• icon-double-angle-up
• icon-double-angle-down

• icon-hand-down
• icon-hand-left
• icon-hand-right
• icon-hand-up
• icon-circle
• icon-circle-blank

Видео плеер

• icon-play-circle
• icon-play
• icon-pause
• icon-stop

• icon-step-backward
• icon-fast-backward
• icon-backward
• icon-forward

• icon-fast-forward
• icon-step-forward
• icon-eject

• icon-fullscreen
• icon-resize-full
• icon-resize-small

Социальные

• icon-phone
• icon-phone-sign
• icon-facebook
• icon-facebook-sign

• icon-twitter
• icon-twitter-sign
• icon-github
• icon-github-alt

• icon-github-sign
• icon-linkedin
• icon-linkedin-sign
• icon-pinterest

• icon-pinterest-sign
• icon-google-plus
• icon-google-plus-sign
• icon-sign-blank

Медицинские Хотите повлиять на здравоохранение? Присоединяйтесь ко мне — Kyruus.

• icon-ambulance
• icon-beaker

• icon-h-sign
• icon-hospital

• icon-medkit
• icon-plus-sign-alt

• icon-stethoscope
• icon-user-md

Интеграция

Интегрировать Font Awesome очень просто в Twitter Bootstrap, а так же использовать отдельно на ваше усмотрение.

Bootstrap + Font Awesome

Используйте Font Awesome с Bootstrap CSS.

1. Скопируйте папку со шрифтами Font Awesome в Ваш проект.
2. Затем скопируйте font-awesome.min.css в Ваш проект.
3. Откройте файл font-awesome.min.css и отредактируйте путь к файлам со шрифтами, если это необходимо. Папка со шрифтами находится относительно (выше) директории с CSS-файлами.
4. Внутри тега Вашей html-страницы, поместите ссылку на font-awesome.min.css.

Кастомная интеграция Bootstrap + Font Awesome с использованием LESS

Используйте этот метод для интеграции Font Awesome в Twitter Bootstrap используя LESS.

1. Скопируйте папку со шрифтами Font Awesome в Ваш проект.
2. Затем скопируйте font-awesome.less в директорию bootstrap/less.
3. Откройте bootstrap.less и замените @import «sprites.less»; на @import «font-awesome.less»;
4. Откройте файл font-awesome.less и отредактируйте переменную @FontAwesomePath так что бы она указывала на директорию со шрифтами.

@FontAwesomePath: "../font";

Кастомная интеграция Bootstrap + Font Awesome Integration используя SASS или SCSS

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

Не используете Bootstrap?

Font Awesome — работает и без использования Twitter Bootstrap.

1. Скопируйте папку со шрифтами Font Awesome в Ваш проект.
2. Затем скопируйте font-awesome.less или font-awesome.min.css в папку Вашего проекта.
3. Откройте font-awesome.less либо font-awesome.min.css и отредактируйте пути к шрифтам (см. пример выше).
4. Обратите внимание на примеры использования Font Awesome перед началом работы над своим проектом!

Требуется поддержка IE7?

Font Awesome работает в IE7. Мои соболезнования если это важно для Вас.

1. Добавьте файл font-awesome-ie7.min.css в папку Вашего проекта.
2. В теге Вашей html страницы, добавьте ссылку на font-awesome-ie7.min.css.

Примеры

Много-много примеров в стиле Twitter Bootstrap.

Используйте наши иконки в:

• Списки (как этот)
• Кнопки
• Группы кнопок
• Навигация
• Пред- и пост- идущие элементы в input
• И много другого в вашем CSS

Новые стили в 3.0

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

Крутящаяся иконка во время загрузки.

Примеры в HTML

Строчные иконки

Поместите тег иконки Font Awesome рядом с любым элементом или в тексте.

icon-camera-retro

icon-camera-retro

Иконки появляются через псевдо-CSS-селектор :before.

Большие иконки

Для увеличения иконки до размеров родительского элемента, используйте классы icon-large , icon-2x , icon-3x или icon-4x .

Увеличьте размер иконки используя класс icon-large (33% увеличение), icon-2x , icon-3x либо icon-4x .

 
icon-camera-retro
 
icon-camera-retro
 
icon-camera-retro
 
icon-camera-retro
 

Если ваши иконки обрезаются по краям — убедитесь в корректной установке line-height.

Анимирование

Используйте класс icon-spin — и Ваша иконка будет крутится. Рекомендуем использовать с icon-spinner и icon-refresh .

Кручусь-верчусь — контент гружусь.

Кручусь-верчусь - контент гружусь.

CSS3-анимация не работает в IE7 — IE9.

Границы & Впуклые иконки

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

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

Используйте множество классов в одном элементе . создания своего уникального стиля.

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

Используйте множество классов в одном элементе . создания своего уникального стиля.