Хаки и Скрипты Next Generation CMS
irbees2008 irbees2008 Опубликовано - 28 - апреля Онлайн сервисы
326 - 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

Можешь почитать и вот эту статейку "Фон сайта с эффектом параллакса на jQuery плагине jquery.plaxmove"

Опрос

Ваше мнение

Какие темы вам интереснее?
Результаты

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

Теги

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

Статистика

  • Caйту: 3481 день
  • Новостей: 555
  • Комменты: 254
  • Зарегистрированно : 585
  • Онлайн всего: [5]
  • Гости: [5]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 32
  • Генерация страницы: 0.422сек
  • Потребление памяти: 5.197 Mb 
  •   яндекс.ћетрика