» » Иконочный шрифт Awesome и другие

Иконочный шрифт Awesome и другие

Сегодня буду рассказывать о том, как подключить к блогу шрифт Font Awesome.
Зачем он нужен? Awesome - это иконочный шрифт, только вместо букв и цифр выводятся иконки или символы. Их применяют в оформлении внешнего вида блога, в статьях и т.д.
Awesome

Awesome 

Font Awesome - https://fontawesome.com/ существует в бесплатном и платном варианте.
Установить шрифт не сложно - заходим Тема - Изменить HTML ищем тег </head>. Над ним вставляем код:
Более новая версия шрифта:
<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.8.2/css/all.css' integrity='sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay' rel='stylesheet'/>
Популярная версия:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
С помощью шрифта можно легко оформить картинку-иконку через CSS, как и простой шрифт. Так же установить цвет, размер, тень и многое другое. И главное такие картинки не тормозят загрузку. 
Все коды для установки шрифта можно скачать на сайте.
установки шрифта
Иконки можно брать отдельно на официальном сайте.
официальном сайте
Коротко пробегусь по основным способам установки шрифта:

1. Иконки можно добавлять через  <i></i> или <span></span>, предварительно прописав класс fa каждому из элементов. Или при помощи псевдоэлементов ::before и ::after
<i class="fa fa-camera-retro"></i>
2. Для замены маркеров в списке <ul>...</ul> используются классы fa-ul и fa-li.
<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>элемент списка</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>элемент списка</li>
  <li><i class="fa-li fa fa-square"></i>элемент списка</li>
</ul>
3. Что бы увеличить размер иконки нужно в css прописать font-size и задать параметр.
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
и так далее.
<i class="fas fa-truck-monster fa-xs"></i>
<i class="fas fa-truck-monster fa-sm"></i>
<i class="fas fa-truck-monster fa-lg"></i>
<i class="fas fa-truck-monster fa-2x"></i>
<i class="fas fa-truck-monster fa-3x"></i>
<i class="fas fa-truck-monster fa-5x"></i>
<i class="fas fa-truck-monster fa-7x"></i>
<i class="fas fa-truck-monster fa-10x"></i>
иконки 2
4. Анимировать любую иконку можно добавив класс fa-spin для круговой анимации. Для пульсирующей - fa-pulse. И классы fa-spinner, fa-refresh и fa-cog.
<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>
5. Для поворота иконки используется класс rotate-* в котором указывается числовое значение градуса поворота иконки. 
6. Используются два класса для отзеркаливания иконки fa-flip-horizontal для горизонтального и icon-flip-vertical вертикального.
<i class="fa fa-shield"></i> 
<i class="fa fa-shield fa-rotate-90"></i> 
<i class="fa fa-shield fa-rotate-180"></i> 
<i class="fa fa-shield fa-rotate-270"></i> 
<i class="fa fa-shield fa-flip-horizontal"></i> 
<i class="fa fa-shield fa-flip-vertical"></i>
7. Так же можно комбинировать иконки, накладывая одну на другую. Для этого используют класс fa-stack для родительской иконки, класс fa-stack-1x - для стандартного размера и fa-stack-2x для увеличенного размера.
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
8. Оформить цитату можно, используя fa-border, чтобы установить рамку для иконки. А классы pull-right и pull-left добавят кавычки для текста.
<li><a href="#"><i class="fa fa-home fa-fw"></i> <p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>Ваша цитата.</p>
цитата
9. Чтобы изменить цвет иконки, нужно дописать внутри тега <i> свойство style, или положить иконку в один из тегов: <span>, <p>, <div>. Можно использовать  стили color, background, text-shadow.
<i class="fa fa-air-freshener fa-5x" style="color: yellowgreen"></i>
10. Шрифт часто используют для создания меню с иконками:
<ul>
  <li><a href="#"><i class="fa fa-home fa-fw"></i> Главная</a></li>
  <li><a href="#"><i class="fa fa-book fa-fw"></i> Все статьи</a></li>
  <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Приложения</a></li>
  <li><a href="#"><i class="fa fa-cog fa-fw"></i> Настройки</a></li>
</ul>
Шрифт, как и другие, о которых напишу ниже, можно использовать в Фотошопе.

38 шрифтов  

Кроме Awesome есть и другие иконочные шрифты.
  1. http://zavoloklom.github.io/
  2. https://octicons.github.com/ - 178 иконок
  3. http://ellekasai.github.io/twemoji-awesome/
  4. http://stackicons.com/
  5. https://developer.wordpress.org/
  6. https://themify.me/themify-icons - 320 иконок
  7. https://zurb.com/playground/foundation-icon-fonts-3 - 283 иконки
  8. https://www.elegantthemes.com/blog/resources/elegant-icon-font - 360 иконок
  9. http://demo.amitjakhu.com/dripicons/
  10. https://pictonic.co/free
  11. http://www.alessioatzeni.com/metrize-icons/ - 300 иконок
  12. https://ionicons.com/ - 528 иконок
  13. http://fontello.com/
  14. https://linearicons.com/free - 170 иконок
  15. http://map-icons.com/ - иконки для карт
  16. http://erikflowers.github.io/weather-icons/ - погодные иконки 222 штуки
  17. http://www.premiumpixels.com/freebies/80-mini-icons-psd-icon-font/
  18. http://mfglabs.github.io/mfglabs-iconset/
  19. https://material.io/tools/icons/?style=baseline
  20. https://www.nerdfonts.com/ - агрегатор иконочных шрифтов
  21. http://www.entypo.com/
  22. https://icomoon.io/#home
  23. http://shalinguyen.github.io/socialicious/ - социальные иконки
  24. http://kudakurage.com/ligature_symbols/ - 240
  25. https://pfefferle.dev/openwebicons/ - 120 иконок
  26. http://www.alessioatzeni.com/meteocons/ - метеоиконки
  27. https://www.fontfabric.com/fonts/social-media-icons-pack/ - социальные иконки
  28. http://drinchev.github.io/monosocialiconsfont/ - ещё социальные иконки
  29. http://www.peax-webdesign.com/goodies/free-icons/icones-gratuites/icon-font.html
  30. http://adamwhitcroft.com/batch/ - 343 штуки
  31. http://www.alessioatzeni.com/metrize-icons/ - 300 иконок
  32. https://www.pixeden.com/icon-fonts/stroke-7-icon-font-set
  33. https://www.tonicons.com/outline-icon-free-font/ - контурный шрифт
  34. http://vorillaz.github.io/devicons/#/main - знаковый шрифт
  35. http://icon-works.com/
  36. https://freebiesbug.com/psd-freebies/80-stroke-icons-psd-ai-webfont/ - 80 иконок
  37. https://www.s-ings.com/typicons/ - 336 иконок
  38. http://genericons.com/#refresh - 123 иконки

Ваши комментарии:

Комментарии со спамом удаляются.