Перейти к содержимому

Сервис обмена электронных валют

Партнерская программа Kredov

FontAwesome: набор шрифтов в форме иконок. Часть 3

#1 TimurR

TimurR
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180
0

Отправлено 23 Январь 2015 - 15:45

Всем привет. Как я и обещал в третьей части статьи посвященной этому замечательному шрифту, мы рассмотрим интересные базовые возможности этих иконок. Тем, кто не читал первые две части, вот ссылка на первую и вторую статьи. Я планировал написать в статье про способ вращение при помощи JS, но и стандартного способа вращения при помощи CSS3 тоже достаточно. Вот пример кода:

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>

Если приписать к иконке класс fa-spin, то она будет плавно вращаться вокруг своей оси. Есть второй вариант, это "пошаговая" анимация, то есть вместо плавного вращения вы получите немного ломанное. За это отвечает класс fa-pulse, который прописан последней иконке. Важно! Анимация не поддерживается в IE 8-9 версий. 

 

Помимо вращения, размер иконок так же можно менять при помощи добавления классов. Пример увеличения иконок:

<i class="fa fa-camera-retro fa-lg"></i> 
<i class="fa fa-camera-retro fa-2x"></i>
<i class="fa fa-camera-retro fa-3x"></i> 
<i class="fa fa-camera-retro fa-4x"></i>
<i class="fa fa-camera-retro fa-5x"></i>

Хотя, удобней задавать размер самому, так как не всякому дизайну подойдут эти размеры. Но просто имейте ввиду, что оно как бы есть. Остальные возможности, которые предоставляет FontAwesome можно посмотреть на этой странице http://fontawesome.io/examples/


 

 

  • 0

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.




Оформление форума – IPBSkins.ru