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

  normal
  fa-rotate-90
  fa-rotate-180
  fa-rotate-270
  fa-flip-horizontal
  fa-flip-vertical

Чтобы произвольно поворачивать и зеркалить иконки, используйте классы 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>

Что такое иконочный шрифт? — Создание шрифтов значков для веб-видеоруководства

Из курса: Создание иконочных шрифтов для Интернета

Что такое иконочный шрифт?

“

Я понимаю, что некоторые из вас, просматривающих этот курс, возможно, никогда раньше не использовали иконочный шрифт. Если вы новичок в них, вы можете спросить себя, что же такое иконочный шрифт и что в них такого особенного? Для вас, ребята, я хочу воспользоваться моментом и дать вам краткий обзор того, что такое иконочные шрифты. И если вы уже использовали их какое-то время или знакомы с ними, вы можете смело идти вперед и пропустить этот фильм, если хотите. Таким образом, иконочные шрифты — это просто еще один способ отображения значков в ваших приложениях и на веб-сайтах. В прошлом эта задача в основном возлагалась на форматы изображений, такие как GIF и PNG, и тогда изображение просто отображалось на странице. С годами у нас появились некоторые методы, такие как спрайты CSS, которые сделали этот процесс немного более эффективным. Но использование изображений для иконок обычно приводит к дополнительным запросам к серверу. И качество изображения, вероятно, пострадает, если значок масштабируется, потому что они зависят от разрешения, что делает их очень плохими для адаптивного дизайна. Чтобы решить эту проблему, дизайнеры обратились к более старому решению — шрифтам. Пока мы создаем шрифты, мы храним в них символы. Например, вы, вероятно, хорошо знакомы со шрифтом, который я сейчас пролистываю. Это Виндингс. Это было вокруг в течение долгого времени. И вы, вероятно, сами использовали пару этих символов, по крайней мере, один или два раза. Что ж, с расширением поддержки веб-шрифтов в браузерах было фактически неизбежно, что кому-то в конце концов придет в голову идея начать использовать значки и символы через шрифты в Интернете. Таким образом, иконочный шрифт ничем не отличается от обычного шрифта. И я собираюсь переключиться на иконочный шрифт, который вы, ребята, будете создавать в этом курсе, чтобы вы могли как бы увидеть, что мы собираемся делать. Как я уже говорил, иконочный шрифт ничем не отличается от обычного шрифта. Единственная разница в том, что вместо буквы, сопоставленной с символом или областью Unicode, у вас будет символ, подобный этому. Теперь каждый шрифт значка немного отличается, и стратегия, используемая для сопоставления значков с конкретными символами, будет определять, как этот шрифт используется. Если, например, значок сопоставлен с определенным символом, например, h здесь для дома, все, что вам нужно сделать, чтобы отобразить его, — это ввести соответствующую букву. Затем убедитесь, что в вашем CSS этот шрифт значка используется для его семейства шрифтов. На самом деле чаще можно найти значки, сопоставленные с определенными символами Unicode, которые избегают использования основных латинских символов. Теперь это могут быть обычные символы символов или часть того, что известно как область частного использования Unicode. Вы можете увидеть пример этого здесь. У нас есть абзац с классом icon-heart. А затем в CSS мы используем псевдо-селектор before, чтобы сказать: «Эй, продолжайте и отобразите эту конкретную кодировку символов, 2661, которая в данном случае является символом сердца, поэтому она будет показывать сердце». Теперь, когда вы сопоставляете эти символы, это могут быть обычные символы символов, как вы видите здесь с этим сердцем, или они также могут быть частью так называемой области частного использования Unicode. И это область, которая зарезервирована для пользовательских глифов, и это то, что мы собираемся использовать в этом курсе, что позволяет дизайнерам использовать шрифты значков, не беспокоясь о том, что на их страницах появятся прямые символы, если шрифт значков не работает. Таким образом, то, как вы кодируете символы при создании собственного иконочного шрифта, имеет большое значение. И мы собираемся обсудить это более подробно немного позже в этом курсе.

Содержание

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

× {{alert.msg}} Никогда больше не спрашивай

Учебники / Дизайн

Веб-разработчики *любят* использовать иконочные шрифты, такие как Font Awesome — какие недостатки и потенциальные ограничения следует учитывать при их использовании?

В часы работы дизайнерского отдела Codementor автор книги O’Reilly Джейсон Паменталь затронул много вопросов по этой теме.

Я думаю, что иконочные шрифты довольно круты. Мне действительно очень нравится с ними работать, и я думаю, что в большинстве случаев это совершенно нормально. Однако у них есть один существенный недостаток.

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

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

Иконочные шрифты: нет хорошего запасного варианта. Итак, если веб-шрифт не загружается, там просто ничего нет. Хотя я все еще использую их, это потому, что я не собрался достаточно, чтобы попробовать Grunticon . Это что-то из Filament Group, которое они создали, чтобы вы могли взять графику SPG и создать запасные варианты PNG и CSS для их использования. Таким образом, вы могли бы иметь все эти значки, которые работают независимо от разрешения, просто используя SPG, а затем иметь PNG в качестве запасного варианта для устройств, которые не понимают SPG, что в наши дни составляет довольно небольшой процент.

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

Иконочные шрифты плохо работают для международной аудитории в Opera Mini

Вы также должны учитывать, что если у вас очень международная аудитория, существует множество устройств, 350 миллионов или около того, которые используют Opera Mini, не поддерживает шрифты значков или вообще какой-либо шрифт. Это большая проблема, если вы работаете на международном сайте с большим трафиком из регионов Африки, Индии или Азии. Это то, о чем стоит подумать. Я думаю, что если у вас в основном ориентированная на США аудитория, то, возможно, это нормально. Я знаю, что полагаюсь на это.

Использование Modernizr для проверки

Если вы используете Modernizr, встроенный в ваш код, вы можете выполнить набор функций и узнать, будут ли поддерживаться веб-шрифты. Надеюсь, там ответят на ваш вопрос. В общем, вы, вероятно, можете сказать: «Конечно, я буду использовать шрифты-значки, потому что они поддерживаются практически везде», если только вы не относитесь к той категории, когда имеете дело с большим количеством людей с медленным подключением и используете очень мало ресурсов. функциональные телефоны, которые должны получить все это прямо сейчас. Взгляните на Grunticon от Filament Group, и это даст вам простой способ обойти это и использовать вместо этого SPG. Надеюсь, это ответит на ваши вопросы.