Главная css Анимированные и другие иконки Awesome

Анимированные и другие иконки 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. Кавычки для цитат

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis recusandae placeat molestiae pariatur voluptate voluptatem consequuntur enim ut corporis temporibus beatae voluptatibus harum vero minus inventore veniam rem, accusantium eius.
Lorem Ipsum

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

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

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

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

 

<style>
#ziz {color: #004b97; border: solid 1px #004b97; line-height: 1.3em; font-size: 13px; background:  #e5fffc;}
#ziz p {padding: 0px 15px;}
#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>

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

• Если хочешь быть счастливым - будь им!
• Лучше скажи мало, но хорошо.
• Что имеем - не храним; потерявши - плачем.

Не забудьте подключить шрифт Awesome. Удачи!