Хаки и Скрипты 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

Можешь почитать и вот эту статейку "Регулярные выражения для валидации"

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

03.10.17Плеер YouTube на сайте с плейлистом
29.11.14Справочник по HTML,CSS
21.06.17Изменил дату новости ,но новости нет на главной
03.10.17Что такое gzip
16.07.18Подключаем PhpConsole на NGCMS

irbees2008 30.04.2021 - 22:24 Вроде все работает

ответить

irbees2008 30.04.2021 - 22:28 проверка

ответить

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.