Анимированные и другие иконки Awesome

В первой статье Иконки Awesome и CSS рассказано как установить и использовать иконочный шрифт Font Awesome.

В этой статье я расскажу о других видах иконок Awesome.

 

1. Анимированные иконки Awesome

Шрифт Awesome включает 5 классов анимированных вращающихся иконок:

Это классы fa-spin, fa-pulse, fa-spinner, fa-refresh и fa-cog

Вид иконок:        

<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>

 

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

<i class="fa fa-file-text fa-lg"></i> 
<i class="fa fa-file-text fa-2x"></i> 
<i class="fa fa-file-text fa-3x"></i> 
<i class="fa fa-file-text fa-4x"></i> 
<i class="fa fa-file-text fa-5x"></i>

Чтобы увеличить размер иконки используются классы fa-lg , fa-2x, fa-3x, fa-4x или fa-5x.

3. Иконки с фиксированной шириной

 <ul>
  <li><a href="#"><i class="fa fa-home fa-fw"></i> Главная</a></li>
  <li><a href="#"><i class="fa fa-book fa-fw"></i> Библиотека</a></li>
  <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Статьи</a></li>
  <li><a href="#"><i class="fa fa-cog fa-fw"></i> Настройки</a></li>  
  <li><a href="#"><i class="fa fa-envelope-o fa-fw"></i> Почта</a></li>

 </ul>

Для фиксирования ширины иконок используется класс fa-fw, задав его, мы фиксируем ширину иконки и можем использовать их как для навигации, так и для оформления списков.


4. Кавычки для цитат


Жизнь — как коробка шоколадных конфет. Никогда не знаешь, какая начинка тебе попадется.

<i class="fa fa-quote-left fa-lg pull-left fa-border"></i>
Жизнь — как коробка шоколадных конфет. Никогда не знаешь, какая начинка тебе попадется.
<i class="fa fa-quote-right fa-lg pull-right fa-border"></i>

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

Пример оформления цитаты


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

 

<style>
#ziz {color: #004b97; border: solid 1px #004b97; line-height: 1.3em; font-size: 13px;}
#ziz p {background: #feffe5; padding: 10px 5px;}
#ziz p i {color: #004b97; border-color: #004b97; background: #a5dbff;}
#ziz p i.v {margin-top: -20px;}
#ziz p i.n {margin-top: 18px;}		
</style>

<div id="ziz">
<p><i class="v fa fa-quote-left fa-lg pull-left fa-border"></i>
Не бойтесь совершать ошибки, спотыкаться и падать, чаще всего величайшую награду 
приносит то, что больше всего нас пугает. ...
<i class="n fa fa-quote-right fa-lg pull-right fa-border"></i></p>
</div>
Не забудьте подключить шрифт Awesome. Удачи!


Похожие статьи