X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> FontAwesome: набор шрифтов в форме иконок. Часть 3
TimurR
TimurR
Topic Starter сообщение 23.1.2015, 16:45; Ответить: TimurR
Сообщение #1


Всем привет. Как я и обещал в третьей части статьи посвященной этому замечательному шрифту, мы рассмотрим интересные базовые возможности этих иконок. Тем, кто не читал первые две части, вот ссылка на первую и вторую статьи. Я планировал написать в статье про способ вращение при помощи 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/


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Вывод на монетизацию канала в Яндекс Дзен, набор 7000 дочиток быстро и безопасно!
20 WildWeb8 5286 6.4.2020, 13:48
автор: WildWeb8
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыCPA сеть admitad.com | Официальный топик Часть 2
105 Antony_ADmitAD 27652 17.3.2020, 10:59
автор: r0mZet
Открытая тема (нет новых ответов) Набор в команду(Работа онлайн)
0 Ambassador2020 1372 28.12.2019, 18:33
автор: -ambassador-
Открытая тема (нет новых ответов) Приватная фарма-партнерка. Ограниченный набор партнеров.
1 Alexdp 2609 12.11.2019, 12:36
автор: Sergey_rx
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыadmitad.com | партнерская сеть - часть 2
Официальный топик партнерской сети admitad.com
92 Antony_ADmitAD 48743 4.3.2019, 14:45
автор: admitad_official


 



RSS Текстовая версия Сейчас: 29.3.2024, 4:44
Дизайн