Хаки и Скрипты Next Generation CMS

Плюшки для FontAwesome

  1. Главная страница
  2. Онлайн сервисы
  3. Разное
irbees2008 irbees2008 Опубликовано - 28 - апреля Онлайн сервисы
3260 - 2
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Что такое 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 тег <i class="fas fa-code"></i>

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

Стили

Для иконок Font Awesome существует четыре стиля:
  1. Solid
  2. Regular
  3. Light
  4. Duotone
При этом иконки solid практически все бесплатные. Остальные - доступны только в pro-версии.

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

Объявление CSS-классов для тега i происходит следующим образом:
Сначала идет класс, определяющий выбранный стиль:
  1. fas для solid,
  2. far для regular,
  3. fal для light,
  4. fad для duotone.
Затем следует класс самой иконки:
  1. который всегда начинается с префикса fa-
  2. и заканчивается именем иконки.

Изменяем размер 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>
Вот что означают эти классы:
  1. fa-rotate-90 поворот на 90o по часовой стрелке,
  2. fa-rotate-180 поворот на 180o по часовой стрелке,
  3. fa-rotate-270 поворот на 270o по часовой стрелке,
  4. fa-flip-horizontal отражение по горизонтали,
  5. fa-flip-vertical отражение по вертикали,
  6. 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

Для того чтобы изменить цвет иконки можно дописать внутри тега <i> свойство style. Либо положить иконку в один из тегов: <span>, <p>, <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>


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

Для этого нужно:
  1. Добавить класс fa-ul для тега списка ul,
  2. Обернуть код выбранной иконки в тег 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:
  1. grow-# для увеличения (# - целое число),
  2. 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 используйте свойства:
  1. up-# для смещения вверх,
  2. down-# для смещения вниз,
  3. left-# для смещения влево,
  4. 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>
Результат:

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

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

Да, поверх иконки можно что-то написать.
Код:
<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>

Для этого нужно:
  1. создать обертку span с классомfa-layers,
  2. внутри обертки добавить иконку i,
  3. после которой должен следовать элемент 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>

Нужно:
  1. создать обертку span с классом fa-layers,
  2. внутри обертки добавить иконку i,
  3. после которой должен следовать элемент span с классом fa-layers-counter.
По умолчанию счетчик находится в правом верхнем углу, но его положение можно изменить с помощью соответствующих классов:
  1. fa-layers-bottom-left внизу слева,
  2. fa-layers-bottom-right внизу справа,
  3. fa-layers-top-left вверху слева,
  4. 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]

Популярное

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

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

Ссылки

Обновленное

Архив

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

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