Хаки и Скрипты Next Generation CMS : Онлайн сервисы, Разное : Плюшки для FontAwesome

irbees2008 Опубликовано - 28 - апреля Онлайн сервисы

Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Что такое FontAwesome?

Font Awesome - это набор масштабируемых векторных иконок. Основной плюс и удобство этого набора — возможность лёгкой персонализации. Любой иконке Вы можете задать свой размер, цвет, тени и все, что делается силами CSS. К тому же это абсолютно бесплатно

Как установить FontAwesome?

Для установки на ваш сайт набора иконок Font Awesome нужно выполнить несколько несложных шагов:

Скачать дистрибутив с сайта fontawesome.io.
Распаковать архив и скопировать папку «font-awesome», например, в корень вашего сайта, туда где лежит файл index.
Подключить файлы в <head> Вашего сайта. Перед закрывающимся тегом </head> поместить строчку: <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">. Не забудьте изменить путь, если скопировали папку с шрифтами в другое место.

На этом установка пакета иконок Font Awesome закончена.

Как пользоваться FontAwesome?

Для вставки иконки на сайт идём сайт fontawesome.io/all-icons/, выбираем нужную иконку и копируем её тег . Например, для иконки anchor тег 

Вставляем тег в нужное место и получаем:

Стили

Для иконок Font Awesome существует четыре стиля:

Solid
Regular
Light
Duotone

При этом иконки solid практически все бесплатные. Остальные - доступны только в pro-версии.

Как это работает?

Объявление CSS-классов для тега i происходит следующим образом:
Сначала идет класс, определяющий выбранный стиль:

fas для solid,
far для regular,
fal для light,
fad для duotone.

Затем следует класс самой иконки:

который всегда начинается с префикса fa-
и заканчивается именем иконки.

Изменяем размер font awesome icons

Для изменения размера пользуемся одним из дополнительных тегов: fa-5x, fa-4x, fa-3x, fa-2x, fa-lg.
Например:

Код:

<i class="fas fa-code fa-lg"></i>
<i class="fas fa-code fa-2x"></i>
<i class="fas fa-code fa-3x"></i>
<i class="fas fa-code fa-4x"></i>
<i class="fas fa-code fa-5x"></i>

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

Поворачиваем font awesome icons

Иконку можно поворачивать вокруг собственной оси, и для этого не нужно CSS-свойство transform. Достаточно добавить соответствующий класс:

Код:

<div class="fa-4x">
<i class="fas fa-code"></i>
<i class="fas fa-code fa-rotate-90"></i>
<i class="fas fa-code fa-rotate-180"></i>
<i class="fas fa-code fa-rotate-270"></i>
<i class="fas fa-code fa-flip-horizontal"></i>
<i class="fas fa-code fa-flip-vertical"></i>
<i class="fas fa-code fa-flip-both"></i>
</div>

Вот что означают эти классы:

fa-rotate-90 поворот на 90^o по часовой стрелке,
fa-rotate-180 поворот на 180^o по часовой стрелке,
fa-rotate-270 поворот на 270^o по часовой стрелке,
fa-flip-horizontal отражение по горизонтали,
fa-flip-vertical отражение по вертикали,
fa-flip-both отражение по горизонтали и вертикали (только для версий 5.7.0 и выше).

Как объединить иконки?

Для наложения одной иконки на другую создаем родительский класс fa-stack, класс fa-stack-1x используем для стандартного размера иконки, а класс fa-stack-2x
для увеличенного.

Код:

<span class="fa-stack fa-2x">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fas fa-code fa-stack-1x"></i>
</span>

Результат:

Как изменить цвет у иконки font awesome

Для того чтобы изменить цвет иконки можно дописать внутри тега  свойство style. Либо положить иконку в один из тегов: , , <div>, с присвоенным классом стилей из файла styles.css.

Код:

<i class="fas fa-code fa-5x" style="color: red"></i>

Результат :

Если вы хотите сделать из иконки ссылку, то просто поместите её в тег <a>.
Пример :

Код:

<a href="https://ngcmshak.ru/onlain-servisy-raznoe/plyushki-dlya-fontawesome.html#"<i class="fas fa-code fa-3x " style="color: red;"></i></a>

Как сделать иконку маркером списка?

Для этого нужно:

Добавить класс fa-ul для тега списка ul,

Обернуть код выбранной иконки в тег span с классом fa-li и поместить в начале каждого элемента списка li

Код:

<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>Иконки Font Awesome</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>могут</li>
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>заменить маркеры HTML-списка</li>
<li><span class="fa-li"><i class="far fa-square"></i></span>не меняя CSS</li>
</ul>

Результат:

Иконки Font Awesome
могут
заменить маркеры HTML-списка
не меняя CSS

Как анимировать иконки?

Классы fa-spin иfa-pulse добавят немного динамики выбранным иконкам:

Код:

<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>

Результат с fa-spin:

Результат с fa-pulse:

Внимание! Для всех приведенных ниже приемов нужна SVG версия Font Awesome

Как масштабировать иконку относительно контейнера (power transforming)?

Масштабировать иконку не изменяя контейнер можно с помощью атрибута data-fa-transform:

grow-# для увеличения (# - целое число),
shrink-# для уменьшения (# - целое число).

Пример

Код:

<div class="fa-4x">
<i class="fas fa-seedling" data-fa-transform="shrink-8" style="background:#0bb346"></i>
<i class="fas fa-seedling" style="background:#0bb346"></i>
<i class="fas fa-seedling" data-fa-transform="grow-6" style="background:#0bb346"></i>
</div>

Вот что получится при уменьшении shrink-8:

Без изменений:

Вот что получится при увеличении grow-6:

Как позиционировать иконку?

Для позиционирования иконки без модификации контейнера с помощью атрибута data-fa-transform используйте свойства:

up-# для смещения вверх,
down-# для смещения вниз,
left-# для смещения влево,
right-# для смещения вправо.

где # - число, которое может содержать десятичные значения.

Код:

<div class="fa-4x">
<i class="fas fa-seedling" data-fa-transform="shrink-8" style="background:#0bb346"></i>
<i class="fas fa-seedling" data-fa-transform="shrink-8 up-6" style="background:#0bb346"></i>
<i class="fas fa-seedling" data-fa-transform="shrink-8 right-6" style="background:#0bb346"></i>
<i class="fas fa-seedling" data-fa-transform="shrink-8 down-6" style="background:#0bb346"></i>
<i class="fas fa-seedling" data-fa-transform="shrink-8 left-6" style="background:#0bb346"></i>
</div>

Результат подобен абсолютному позиционированию в CSS.

Так будет выглядеть смещение иконки вверх относительно контейнера:

а так - смещение влево:

Как создать маску для иконки?

Это еще одна функция, позволяющая объединять две иконки в одну, но теперь с помощью атрибута
data-fa-mask, в который мы помещаем классы фоновой иконки:

Код:

<div class="fa-4x">
<i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment" style="background:#0bb346"></i>
</div>

Результат:

Таким образом, мы объединили  с <iclass="fas fa-pencil-alt">

Как добавить текст к иконке?

Да, поверх иконки можно что-то написать.

Код:

<span class="fa-layers fa-fw" style="background:#0bb346">
<i class="fas fa-calendar"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
</span>

<span class="fa-layers fa-fw" style="background:#0bb346">
<i class="fas fa-certificate"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span>
</span>

Для этого нужно:

создать обертку span с классомfa-layers,
внутри обертки добавить иконку i,
после которой должен следовать элемент span с классом fa-layers-text, содержащий текст.

Результат:
27
и еще:
NEW

Как к иконке добавить счетчик?

Для того чтобы добавить счетчик, последовательность действий почти такая же, как и при добавлении текста поверх иконки.

Код:

<span class="fa-layers fa-fw" style="background:#0bb346">
<i class="fas fa-envelope"></i>
<span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>

Нужно:

создать обертку span с классом fa-layers,
внутри обертки добавить иконку i,
после которой должен следовать элемент span с классом fa-layers-counter.

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

fa-layers-bottom-left внизу слева,
fa-layers-bottom-right внизу справа,
fa-layers-top-left вверху слева,
fa-layers-top-right вверху справа (значение по умолчанию).

Результат:
1,419

Можешь почитать и вот эту статейку "Плагин "Архив сайта""

Это тоже интересно

{avatar}

[profile][/profile]irbees2008[profile][/profile] 28 апреля 2021 [if-have-perm]| [edit-com][/edit-com] | [del-com][/del-com][/if-have-perm] {comment-short}[comment_full]

читать полностью

[/comment_full] [answer]
--------------------
Ответ от{name}
{answer}[/answer] [quote]

irbees2008');" style="cursor: pointer;">ответить[/quote]

{avatar}

[profile][/profile]irbees2008[profile][/profile] 28 апреля 2021 [if-have-perm]| [edit-com][/edit-com] | [del-com][/del-com][/if-have-perm] {comment-short}[comment_full]

читать полностью

[/comment_full] [answer]
--------------------
Ответ от{name}
{answer}[/answer] [quote]

irbees2008');" style="cursor: pointer;">ответить[/quote]

Обновленное

РазноеПереезд часть 6 ..... ошибки
РазноеПереезд часть 7.....Хочу кнопку копировать содержимое !!!
РазноеКак сделать ссылку на профиль?
РазноеПочему тормозит интернет: основные причины и особенности загрузки сайтов
Слайдшоу и анимацияСлайдер не работает, как с этим бороться
Настройка плагиновПлагин NSM

Статистика

Caйт cущecтвуeт: 4637 дней
Статических страниц: 10
Категорий: 28
Новостей: 619
Неопубликованных новостей: 8
Комментариев: 257
Зарегестрированных пользователей: 779
Онлайн всего: [5]
Гости: [4]
Поисковые роботы: [1] Яндекс
Сегодня нас посетили: [8] Google, Larrytitly, Яндекс, Яндекс, irbees2008, Google, dankeanke, Google

SQL запросов: 37
Генерация страницы: 0.622сек
Потребление памяти: 5.024 Mb

Плюшки для FontAwesome

Что такое FontAwesome?

Как установить FontAwesome?

Как пользоваться FontAwesome?

Стили

Как это работает?

Изменяем размер font awesome icons

Поворачиваем font awesome icons

Как объединить иконки?

Как изменить цвет у иконки font awesome

Как сделать иконку маркером списка?

Как анимировать иконки?

Как масштабировать иконку относительно контейнера (power transforming)?

Как позиционировать иконку?

Как создать маску для иконки?

Как добавить текст к иконке?

Как к иконке добавить счетчик?

Это тоже интересно

Популярное

Опрос

Ваше мнение

Последние комментарии

Ссылки

Обновленное

Архив

Теги

Статистика