Иконочные шрифты, альтернативы FontAwesome
Веб-разработкаЧто такое «Иконочный шрифт» — это обычный шрифт, но вместо букв и цифр в нем отображаются различные пиктограммы и символы. В последние годы такие шрифты активно используют в веб-дизайне, в качестве иконок для сайта. С их помощью можно улучшить юзабилити сайта, упростить восприятие информации. Еще из плюсов использования иконочных шрифтов по сравнению с иконками-картинками:
- Возможность масштабирования без потери качества
- Беспроблемная поддержка в большинстве браузеров
- Возможность стилизации, работа как с обычным текстом
- Небольшой вес
- Всего за один запрос на сервер загружаются все необходимые иконки
Кроме использования для сайтов, такие шрифты можно установить и в свою ОС и использовать в программах, например в Фотошопе.
Самый популярный иконочный шрифт FontAwesome https://fontawesome.
Этот шрифт в качестве иконок содержит логотипы различных интернет и ИТ брендов.
Шрифт поставляется с CSS, поэтому у вас есть возможность его кастомизации. Иконки шрифта можно использовать без фона или с фоном сделав из квадратными, с закругленными концами и просто круглыми.
Вы можете использовать цветные иконки, которые повторяют реальные цвета бренда.
Лицензия: SIL Open Font and MIT
Twemoji — это open source проект смайликов от Twitter. Канадский дизайнер Elle Kasai создала на его основе иконочный штифт Twemoji Awesome.
Все имена классов для отображения иконок такие же, как в шпаргалке по Twemoji (https://www.webfx.com/tools/emoji-cheat-sheet/), но вам нужно использовать тире (-) вместо подчеркивания (_), вот и все.
Лицензия: MIT and CC-BY for the Emoticon graphics
Octicons — это иконочный шрифт от GitHub.
Он позволит использовать в вашем проекте те же иконки, что и на GitHub. Доступно более 170 иконок.
Лицензия: MIT
Этот шрифт включает в себя 250 иконок в 5 различных размерах и 14 цветах.
Лицензия: Attribution-ShareAlike 4.0 International
DevIcons — это иконочный шрифт разработанный Теодором Ворильясом. Он содержит 85 символов и логотипов знакомых приложений для разработки, таких как GitHub, Laravel, Django, Visual Studio и многих других.
Лицензия: MIT
Лицензия: Attribution-ShareAlike 4.0 International
CSS Иконки
При помощи специальной библиотеки графических иконок можно легко добавлять CSS иконки на вашу HTML страницу.
Как добавить CSS иконки
Самый простой способ добавить иконки на сайт это воспользоваться какой-нибудь библиотекой иконок, например, Font Awesome, Bootrap или Google.
После этого к любому строчному элементу HTML (например, <i> или <span>) добавляется специальный класс иконки, который можно узнать на сайте библиотеки иконок.
Все иконки в описанных далее библиотеках иконок являются масштабируемыми векторными изображениями, которые можно настраивать при помощи CSS (изменять размер и цвет, добавлять тени и т.п.).
Иконки Font Awesome
Чтобы добавить иконки Font Awesome, перейдите на сайт fontawesome.com, зарегистрируйтесь и получите код, который затем нужно добавить в секцию <head> вашей HTML страницы:
<script src="https://kit.
fontawesome.com/вашкод.js" crossorigin="anonymous"></script>
При этом никакой загрузки или установки не требуется!
Пример:
<!DOCTYPE html> <html> <head> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> </head> <body> <i></i> <i></i> <i></i> <i></i> <i></i> </body> </html>
Результат:
Иконки Bootstrap
Чтобы использовать «глификонки» Bootstrap, добавьте следующий код в секцию <head> вашей HTML страницы:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
При этом никакой загрузки или установки не требуется!
Пример:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <i></i> <i></i> <i></i> <i></i> <i></i> </body> </html>
Результат:
Иконки Google
Чтобы использовать иконки Google, добавьте следующий код в секцию <head> вашей HTML страницы:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
При этом никакой загрузки или установки не требуется!
Пример:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <i>cloud</i> <i>favorite</i> <i>attachment</i> <i>computer</i> <i>traffic</i> </body> </html>
Результат:
cloud favorite attachment computer traffic
blazor — отображаются только некоторые значки Font Awesome
Работают только некоторые значки:
- fa-user
- фа-чек
- фа-минус
- факс-телефон
Другие просто показывают пустой квадратный значок:
- фа-череп
- fa-яблоко
и другие ничего не делают:
- факс
- факс-марк
- фа-дорога-круг-восклицательный знак
Я использую Blazor с Blazorize и пробовал следующее:
-
-
-
Mail" /> -
-
-
В моем файле _Host.cshtml у меня есть:
Без которого метод Blazorize никогда не работает.
- blazor
- шрифт потрясающий
- blazorise
5
Решение. Обновите до Font Awesome 6
Значки, такие как «xmark», не работают, поскольку они не включены в бесплатный набор значков Font Awesome версии 5. И вопрос конкретно касается версии 5, включая ссылку. Возможные решения: (1) не использовать отсутствующие значки или (2) обновиться до Font Awesome 6.
И, кстати, Bootstrap 5 теперь имеет свой довольно обширный набор иконок, которые можно найти здесь:
Иконки Bootstrap
0
Мой быстрый обходной путь — использовать fa-close вместо fa-xmark
Я использую bootstrap 5, fa-xmark не работает, иногда работает только fa-check.
см. мой пример ниже оранжевый значок и зеленый значок
Кажется, что значки xmark доступны только в платной версии 6.2.0. Я нашел обходной путь: вы можете скачать .svg файл понравившейся иконки и использовать его в своем проекте с помощью тег. Вы потеряете некоторые причудливые функции, такие как простая настройка, но они все еще работают.
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Требуется, но никогда не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Изучение значков Font Awesome — Начало работы с CSS
Расшифровка из урока 9 «Значки Font Awesome»0005
[00:00:00]
>> Перейдем к некоторым доступным значкам.
Мы собираемся работать с чем-то под названием Font Awesome, и я полагаю, что многие из вас слышали о Font Awesome еще до сайта fontawesome.com. Причина, по которой я использую Font Awesome здесь, заключается в том, что Font Awesome — это бесплатная или потенциально частично бесплатная частично платная библиотека шрифтов, которая предлагает массу доступных вам иконок.
[00:00:27] Итак, если вы хотите перейти на fontawesome.com, нажмите «Начать бесплатно». Давайте посмотрим здесь или значки, я думаю, я должен сказать, в верхней части навигации. Если кликнуть по иконкам, то он скажет, что на сегодня 7864 иконки, не все из них бесплатны.
[00:00:45] Если вы нажмете «Бесплатно» здесь, в левой панели навигации, сегодня бесплатными будут только 1608 иконок, и это Font Awesome пятерка. На момент этой записи ожидается выпуск Font Awesome 6, но сегодня мы будем работать с Font Awesome 5. Причина, по которой мы собираемся использовать шрифт для этого, заключается в том, что это вводный курс по CSS, и мы попытаемся упростить работу с иконками.
[00:01:11] Многие профессионалы скажут вам, что они предпочитают работать с реальным SVG, масштабируемой векторной графикой, которая даст вам математику для рисования этих типов значков и включения этих SVG в свой документ. Я предпочитаю использовать Font Awesome, когда преподаю такой курс, потому что при одной установке у нас есть доступ к 1608 значкам, и поэтому легко вносить изменения и менять местами вещи.
[00:01:39] По этой причине вам также может понравиться прототипирование. После того, как вы точно определили, какие значки вы хотите использовать, вы всегда можете вернуться позже и заменить их фактическим кодом SVG. Причина, по которой людям нравится SVG больше, чем сам шрифт, заключается в том, что размер файла шрифта намного больше, чем размер отдельных SVG.
[00:02:00] Редко, когда вы собираетесь использовать весь этот набор иконок внутри своего веб-сайта. Так зачем загружать все это, если вы собираетесь использовать только несколько значков в первом? Но для наших целей это идеально.
Давайте пройдемся по замене значка LinkedIn, затем я позволю вам, ребята, заменить значок GitHub и добавить свой значок для всего, что вы хотите сделать.
[00:02:27] Итак, мы здесь, это было в Части 3 Добавление доступного значка. Итак, я собираюсь провести вас через добавление значка LinkedIn. Итак, мы начнем здесь, внутри Font Awesome, и мы ищем значок для LinkedIn. Итак, в поле поиска все, что нам нужно сделать, это ввести LinkedIn, и, как выясняется, здесь есть два варианта.
[00:02:49] Я предпочитаю тот, что с коробкой. Если вам нравится другой, это тоже нормально. Когда вы щелкнете по этому конкретному значку, он уведомит вас об этом, он даст вам возможность загрузки, вот этот значок загрузки. Вы можете скачать SVG отсюда.
[00:03:07] Это также даст вам HTML, который будет вызывать этот конкретный значок. Это даст вам опцию Unicode, полезную в некоторых средах. Я использовал это, например, при работе в Web Flow, или вы можете скопировать глиф Unicode. Мы скопируем этот HTML-код прямо сюда, нажмите на него.
[00:03:30] А затем внутри нашей области кода в нашем HTML, мы прокрутим назад до нашего LlinkedIn, и я собираюсь заглянуть внутрь самой ссылки Прямо здесь, я собираюсь вставьте этот конкретный код. И я думаю, что я просто немного переформатирую это, чтобы вы могли лучше читать это на экране.
[00:04:01] Итак, у нас есть li, у нас есть правильная ссылка, а затем у нас есть этот код, который мы только что скопировали из Font Awesome, и ничего не происходит, почему так? Мы не загрузили шрифт. Итак, давайте загрузим шрифт. Мы собираемся перейти к нашим настройкам, мы собираемся перейти к нашему CSS и прокрутить вниз до внешних таблиц стилей и ручек.
[00:04:25] Одним из преимуществ CodePen является то, что в нем уже есть Font Awesome, доступный для вас. Итак, если в поле поиска здесь вверху мы начнем вводить Font Awesome. В этом случае вы получите версию 5.15.4. Это самая последняя версия на данный момент.
[00:04:42] Нажмите, чтобы добавить эту строку кода прямо сюда, и мы можем сказать «Сохранить и закрыть».
И вы увидите здесь, внутри нашей ссылки, у нас есть значок LinkedIn в дополнение к работам LinkedIn. Так что это довольно здорово. Итак, мы собираемся внести пару изменений в код, который дает нам Font Awesome, и он дал мне I здесь, и я думаю, он делает это, потому что я иконка.
[00:05:08] Ничто не может быть дальше от истины. Элемент I появился в Интернете очень давно, раньше у нас была большая поддержка CSS, и если мы хотели сделать что-то полужирным, мы использовали B, а если мы хотели сделать что-то курсивом, мы использовали I.
[00:05:27] Очевидно, появился CSS, и мы переключились на более семантические элементы и M, но B и я вернулись в HTML 5. Они означают все, что означают совершенно разные вещи, которые не имеют ничего общего с полужирным шрифтом и таликом. Хорошо, и они не имеют в виду икону.
[00:05:44] Так что мне не особо нравится эта разметка. Я предпочитаю использовать его с интервалом, что является лучшим выбором. Так что я всегда меняю это, чтобы протянуть, когда я работаю с этим, если вы хотите оставить это, как я, это, безусловно, нормально, если многие люди делают это.
[00:06:05] И еще одна вещь, которая происходит с точки зрения доступности, вы хотите скрыть значок от программ чтения с экрана, но вы хотите, чтобы ваши люди, которые просматривают этот веб-сайт, могли видеть значок . Но для программ чтения с экрана вам может понадобиться текст с надписью LinkedIn, но вы хотите скрыть его от людей, которые могут видеть значок.
[00:06:26] Итак, нам нужно немного поэкспериментировать, чтобы показать значок или слова нужному человеку. Этот трюк со скрытием слов я рекомендую только тогда, когда иконка действительно действительно что-то, что ваша целевая аудитория собирается понять. Это сайт-портфолио.
[00:06:45] Люди, которые ищут сотрудников, знают, что такое LinkedIn, и знают значок. Они знают, что такое значок GitHub. Но если вы находитесь в ситуации, когда, я не знаю, вы хотите, чтобы какой-то значок отображался для части страницы «О программе», вам нужно будет включить несколько слов. с этим.
[00:07:04] Так что подумайте, поймут ли люди, что означает этот значок.
Таким образом, мы настроим это следующим образом внутри нашего значка, мы собираемся сказать, что скрытая ария равна истинной. Так что это скроет саму иконку от программ чтения с экрана. Хорошо? Итак, это первая часть этого.
[00:07:35] И затем вторая часть этого со словом LinkedIn, и я собираюсь поместить экран Span вокруг этого, и я собираюсь добавить дефис класса SSR только Слово LinkedIn, а затем косая черта. Итак, что это такое? Это дефис SSR только каждый раз, когда вы его видите, и вы увидите его в Bootstrap.
[00:08:04] Вы увидите это в Tailwind, вы увидите это во всех местах, во всех видах фреймворков. Имеется в виду только программа для чтения с экрана. Итак, это стиль CSS, который взят из начальной загрузки или, извините, из таблицы стилей Font Awesome. И он возьмет это слово и настроит его таким образом, чтобы программы чтения с экрана могли прочитать его, если они читают вашу веб-страницу, но люди, которые смотрят на вашу страницу визуально, не увидят это слово и на самом деле.
[00:08:32] Вот что здесь происходит. Вы можете видеть значок LinkedIn, но вы больше не видите слов LinkedIn, но он по-прежнему доступен. Вот изменения, которые вам необходимо внести, если вы собираетесь работать с Font Awesome и с его набором иконок.
[00:08:45] Эти два изменения. Aria Hidden True на значке, а затем убедитесь, что слова доступны для всех в зависимости от типа значка, который вы используете, или добавьте этот класс SR, только если слова должны быть скрыты от всех, кроме программ чтения с экрана. Эти конкретные классы взяты из Font Awesome и того, как он думает о мире.
[00:09:07] Итак, любая страница иконок, которую вы здесь видите. Я посмотрю на этого хамелеона, у него есть FAB, начну добавлять FA. Эта ссылка здесь имеет ФАС начинается с ФАС. Это связано с каким-то стилем здесь внутри Font Awesome, но все эти значки будут начинаться с FAS, FAB FA, независимо от того, что они все начинаются с FA.
[00:09:36] К счастью, есть очень классный селектор, который мы можем использовать, который сообщит, начинается ли он с FA.