Примеры использования Font Awesome
После того, как вы подключили Font Awesome к своему проекту, иконки можно вызывать с помощью тега <i>.
Некоторые примеры были позаимствованы из документации Bootstrap.
The following examples are kept simple and assume use of Font Awesome CDN, which provides auto-accessibility support. If you are not using the Font Awesome CDN, please see the manual accessibility examples and read more about making your icons more awesome for all users
Пример: Базовые иконки fa-camera-retro
Вы можете разместить иконки Font Awesome в любом месте, используя в имени класса префикс fa и название иконки. Font Awesome разработан так, чтобы он мог быть использован в строковых элементах (мы любим использовать тег <i> так как он очень короткий, но использование тега <span> будет семантически более правильно).
<i></i> fa-camera-retro
- Пример: Базовые иконки Если вы меняете значение свойства font-size у контейнера иконок, то иконки станут больше.
Такое поведение происходит и с цветом, тенью и другими свойствами, которые могут наследоваться.
Такое поведение происходит и с цветом, тенью и другими свойствами, которые могут наследоваться.fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
Для увеличения размеров иконок в родительском элементе используйте классы fa-lg (увеличение на 33%), fa-2x, fa-3x, fa-4x, или
<i></i> fa-lg <i></i> fa-2x <i></i> fa-3x <i></i> fa-4x <i></i> fa-5x
- Если ваши иконки обрезаны сверху и снизу, то удостоверьтесь в правильном значении свойства line-height.
Главная Библиотека Приложения Настройки
Используйте класс fa-fw для того, чтобы задать фиксированную ширину иконкам.
<div> <a href="#"><i aria-hidden="true"></i> Главная</a> <a href="#"><i aria-hidden="true"></i> Библиотека</a> <a href="#"><i aria-hidden="true"></i> Приложения</a> <a href="#"><i aria-hidden="true"></i> Настройки</a> </div>
- Иконки списков
- могут быть использованы
- как маркеры
- в списках
Используйте классы fa-ul и fa-li для быстрого удаления стандартных маркеров в ненумерованных списках.
<ul> <li><i></i>Иконки списков</li> <li><i></i>могут быть использованы</li> <li><i></i>как маркеры</li> <li><i></i>в списках</li> </ul>
…Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от
всего сердца… Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я.
Используйте классы fa-border и fa-pull-right или fa-pull-left для выделения цитаты или подключения иконки статьи.
<i aria-hidden="true"></i> ...Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца... Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я.
Пример загрузки (с fa-spinner icon) Пример загрузки (с fa-circle-o-notch icon) Пример загрузки (с fa-refresh icon) Пример загрузки (с fa-cog icon) Пример загрузки (с fa-spinner icon)
Используйте класс fa-spin, чтобы заставить вращаться любую иконку, и используйте класс fa-pulse, чтобы заставить вращаться иконку по 8 шагов. Также работает с классами fa-spinner, fa-refresh, и fa-cog.
<i></i> <span>Загрузка.
..</span>
<i></i>
<span>Загрузка...</span>
<i></i>
<span>Загрузка...</span>
<i></i>
<span>Загрузка...</span>
<i></i>
<span>Загрузка...</span>
На заметку: Некоторые браузера на нескольких платформах имеют проблемы с анимацией иконок, что дает эффект «безудержного веселья» у иконки. Читайте проблему #671 для ознакомления с ней и изучения возможных решений.
На заметку: Анимация CSS3 не поддерживается в IE8 — IE9.
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-vertical
Чтобы произвольно поворачивать и зеркалить иконки, используйте классы fa-rotate-* and fa-flip-*..png)
<i></i> normal<br> <i></i> fa-rotate-90<br> <i></i> fa-rotate-180<br> <i></i> fa-rotate-270<br> <i></i> fa-flip-horizontal<br> <i></i> fa-flip-vertical
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-ban на fa-camera
Чтобы сделать группу из иконок, используйте класс fa-stack для родителя, класс fa-stack-1x используйте для задания стандартного размера иконки, а класс fa-stack-2x для увеличенного. Класс fa-inverse может быть использован для присваивания альтернативного цвета иконке. Также вы можете использовать классы увеличения для управления размерами иконок.
<span> <i></i> <i></i> </span> fa-twitter на fa-square-o<br> <span> <i></i> <i></i> </span> fa-flag на fa-circle<br> <span> <i></i> <i></i> </span> fa-terminal на fa-square<br> <span> <i></i> <i></i> </span> fa-ban на fa-camera
Примеры для Bootstrap 3
Удалить Настройки
Font Awesome
Версия 4.
7.0
Font Awesome прекрасно работает со всеми компонентами Bootstrap.
<a href="#">
<i></i> Удалить</a>
<a href="#">
<i></i> Настройки</a>
<a href="#">
<i></i> Font Awesome<br>Версия 4.7.0</a>
<div>
<a href="#">
<i title="Align Left"></i>
</a>
<a href="#">
<i title="Align Center"></i>
</a>
<a href="#">
<i title="Align Right"></i>
</a>
<a href="#">
<i title="Align Justify"></i>
</a>
</div>
<div>
<span><i></i></span>
<input type="text" placeholder="Ваш Email">
</div>
<div>
<span><i></i></span>
<input type="password" placeholder="Пароль">
</div>
<div>
<a href="#"><i></i> Пользователь</a>
<a data-toggle="dropdown" href="#">
<span title="Toggle dropdown menu"></span>
</a>
<ul>
<li><a href="#"><i></i> Редактировать</a></li>
<li><a href="#"><i></i> Удалить</a></li>
<li><a href="#"><i></i> Забанить</a></li>
<li></li>
<li><a href="#"><i></i> Дать права администратора</a></li>
</ul>
</div>
Пользовательский CSS
Всё, что вы можете сделать со шрифтами с помощью CSS, вы сможете сделать и с Font Awesome.
Пример рейтинга (позаимствовано из CSS Tricks)
Общедоступность
Обновление… Сохранение. Держитесь крепче!
Уровень заряда: 50%
Немного о наших мыслях об общедоступности иконок. Если иконка используется для декорирования или отображения бренда, то они не должны быть объявлены общедоступно, тк они влияют на приложения, читающие сайты в слух. Если иконка передает смысл содержания текста в контексте интерфейса, то убедитесь в том, что этот смысл также передается и вспомогательными технологиями, дополнительным текстом или скрытым блоком.
<a href="path/to/settings" aria-label="Настройки"> <i aria-hidden="true"></i> </a> <a href="path/to/settings" aria-label="Удалить"> <i aria-hidden="true"></i> </a> <a href="#navigation-main" aria-label="Перейти к основному меню"> <i aria-hidden="true"></i> </a>
<i aria-hidden="true"></i> <span>Обновление.
..</span>
<i aria-hidden="true"></i>
<span>Сохранение. Держитесь крепче!</span>
<div> <span><i aria-hidden="true"></i></span> <input type="text" placeholder="Ваш email"> </div> <div> <span><i aria-hidden="true"></i></span> <input type="password" placeholder="Пароль"> </div>
<a href="path/to/shopping/cart" aria-label="Посмотреть 3 предмета в вашей корзине"> <i aria-hidden="true"></i> </a>
<i aria-hidden="true"></i> <span>Уровень заряда: 50%</span>
10 Бесплатных ресурсов с иконочным шрифтом для веб-сайтов – Dobrovoimaster
Открытые исходные веб-шрифты позволяют дизайнерам кардинально менять дизайн страниц и типографские стили. Некоторые из этих веб-шрифтов используют наборы иконок, для переноса векторных значков в CSS.
Если вы ищете 100% бесплатные наборы шрифтовых иконок для своего веб-сайта, тогда эта статья для вас.
В этом небольшом обзоре постарался собрать только лучшее, одни из самых популярных ресурсов, предоставляющих в свободный доступ отличные пакеты иконочных шрифтов.
Каждый набор иконок полностью совместим с SVG векторами и форматами webfont и отлично подойдёт для включения в ваши таблицы стилей, и непосредственно в веб-страницы.
1. Font Awesome
Начнём с одной из самых популярных среди большинства веб-дизайнеров библиотек иконочных шрифтов. Пакет Font Awesome существует уже много лет, и он по праву считается первым крупным набором шрифт-иконок с открытым исходным кодом. Библиотека обновляется довольно часто, пополняясь свежими иконками и в настоящее время находится в версии 4.7.0. Исходный код на GitHub в свободном доступе, открыт для скачивания без каких бы то ни было ограничений.
Скачать
2. Material Design Icons
С появлением концепции материального дизайна от Google, в web кардинально изменился подход к UI/UX, что привело к появлению множества новых фреймворков и ресурсов, в том числе и огромной библиотеки иконочных шрифтов в материальном дизайне.
Набор иконок полностью бесплатный и доступен для скачивания на GitHub. Этот пакет довольно массивный, содержит более 1000+ иконок, охватывающих широкий спектр функций интерфейса.
Поскольку исходный код открытый, вы можете использовать его в любых проектах без ограничений, а так же настраивать иконки, если это необходимо. Идеально подходит для тех, кто плотно работает с основными правилами материального дизайна Google в web.
Скачать
3. Captain Icon
Captain Icon, иконочный шрифт созданный дизайнером Марио дель Валле, для меня является фаворитом в числе веб-шрифтов. Это совершенно бесплатный проект с открытым исходным кодом, размещенный на GitHub, упакованный векторными файлами и веб-шрифтами. Что мне больше всего нравится в этом пакете иконок, — это оригинальный стиль. Каждая иконка имеет уникальный дизайн, и все они нарисованы, что называется с чистого листа, что ставит этот набор намного выше других более общих пакетов иконок. Но я не думаю, что Captain Icon одинаково хорошо подойдёт для каждого проекта.
Как мне кажется, эти иконки лучше всего использовать на творческих сайтах, где рисованный стиль соответствует общему художественному дизайну.
Скачать
4. Typicons
Набор Typicons, иконки с закругленными углами и простыми контурами, идеально подойдёт для любого сайта. Пакет включает в себя 330 + уникальных иконок с оригинальным стилем.
Пакет полностью бесплатный и также доступен на GitHub. Скачав иконки, вы можете добавлять их непосредственно на ваш сайт и редактировать по мере необходимости.
Мало кто знает о Typicons, но это один из лучших доступных наборов шрифт-иконок, который может даже работать на iOS с небольшими корректировками и специальными фрагментами кода.
Скачать
5. Octicons
Недавно GitHub представил свой собственный пакет иконок под названием Octicons. Этот бесплатный набор в настоящее время находится в версии 5.0 и включает в себя десятки иконок с некоторыми основными символами используемыми в веб-дизайне.
Эти иконки можно найти разбросанными по всему сайту GitHub. Они достаточно просты и прекрасно впишутся практически в любой интерфейс.
Если вам нужны простые и легкие иконки, то обязательно присмотритесь к пакету Octicons.
Скачать
6. Zondicons
Zondicons абсолютно бесплатный и очень легкий набор иконок, который очень просто добавить на ваш сайт. К сожалению, пакет не размещён на GitHub, поэтому у него нет архива обновлений.
Но вы можете увидеть все примеры на демонстрационной странице, включая классы CSS, которые вам нужны, чтобы правильно включить их в работу. Основная ссылка на скачивание Zondicons идет прямо с веб-сайта разработчика, поэтому трудно сказать, были ли они когда-либо обновлены или добавлены новые иконки. Хотя на странице с иконками и указана дата последнего обновления: 19 Марта 2017.
Скачать
7. Entypo
Семейство шрифт-иконок Entypo существует уже несколько лет. Эти иконки превосходны и уверенно занимают верхние позиции среди бесплатных продуктов данной тематики.
Новые иконки добавляются от не постоянно, но довольно часто, я бы сказал от случая к случаю, и находятся в открытом доступе. Шрифты разделены на две части: основной пакет и социальный пакет. Поэтому, если вам не нужны иконки для социальных сетей, вы можете немного уменьшить размер пакета. Entypo представлен с более чем 400 иконками в наборе. Чтобы узнать больше об установке и настройке иконок, прочитайте ответы на часто задаваемые вопросы FAQ (если шарите в буржуинском), ну, и конечно же посетите репозиторий проекта на GitHub.
Скачать
8. Devicons
Пакет Devicons — это один из новых веб-шрифтов с акцентом на технологические логотипы и брендинг. Уже сейчас вы можете смело его использовать на своих проектах.
Эти иконки представлены в виде логотипов, как крупных технических игроков веб-пространства, таких как Google, так и более новых логотипов CMS, например, таких как Ghost. Скорее всего, такой набор будет полезен только для сайтов, которые широко используют логотипы, например, различные рейтинговые каталоги и т.
п. Большинству разработчиков достаточно будет лишь отдельные иконки из этого пакета.
Набор иконок абсолютно бесплатный! Информацию об установке вы найдете на этой странице, там же представлена свободная версией CDN, которую вы можете использовать для сокращения времени загрузки.
Скачать
9. Ionicons
Многим разработчикам уже давно хорошо знаком Ionic Framework, это один из самых популярных вариантов для разработки мобильных веб-приложений. В свою очередь команда Ionic решила выпустить свой набор иконок в виде веб-шрифта под названием Ionicons.
Естественно, иконки абсолютно бесплатны и доступны на GitHub. Вы так же можете добавить эти иконки прямо на ваш сайт, используя версию таблицы стилей CDN.
Я рекомендую Ionicons в основном для новичков, которые раньше не использовали знаковые шрифты, так как эти иконки очень просты в настройке, и как только вы поймете, как они работают, вы сможете перейти к использованию практически любых иконочных веб-шрифтов.
Скачать
10. MFG Labs
Ещё один из новых шрифтов в этом списке, принадлежит MFG Labs с собственным набором иконок. Набор полностью бесплатный и размещен на GitHub в свободном доступе.
Каждая иконка представлена с упакованными стандартными форматами webfont, использующими Unicode PUAs в CSS. Полностью семантический код с поддержкой во всех браузерах, что уменьшает вероятность конфликта с другим кодом CSS.
Посмотрите, иконки MFG Labs имеют свой уникальный стиль, который выделяется из общего ряда. Рекомендую этот набор иконок, для любого типа веб-сайтов, коммерческих, персональных блогов и других.
Скачать
Заключение
Из огромного массива иконочных шрифтов, довольно сложно выбрать всего лишь десять знаковых комплектов, потому как каждый год, «на гора» выдаются всё новые и новые наборы, не менее шикарных наборов иконок. На данный момент, в этом обзоре попытался собрать лучшие, сугубо на мой взгляд, ресурсы предоставляющие в свободный доступ наборы шрифт-иконок.
Если вы порекомендуете другие, обязательно напишите о них в комментариях ниже: ↓
С Уважением, Андрей .
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
| Иконка | Классы |
|---|---|
glyphicon glyphicon-asterisk | |
glyphicon glyphicon-plus | |
glyphicon glyphicon-euro | |
glyphicon glyphicon-minus | |
glyphicon glyphicon-cloud | |
glyphicon glyphicon-envelope | |
glyphicon glyphicon-pencil | |
glyphicon glyphicon-glass | |
glyphicon glyphicon-music | |
glyphicon glyphicon-search | |
glyphicon glyphicon-heart | |
glyphicon glyphicon-star | |
glyphicon glyphicon-star-empty | |
glyphicon glyphicon-user | |
glyphicon glyphicon-film | |
glyphicon glyphicon-th-large | |
glyphicon glyphicon-th | |
glyphicon glyphicon-th-list | |
glyphicon glyphicon-ok | |
glyphicon glyphicon-remove | |
glyphicon glyphicon-zoom-in | |
glyphicon glyphicon-zoom-out | |
glyphicon glyphicon-off | |
glyphicon glyphicon-signal | |
glyphicon glyphicon-cog | |
glyphicon glyphicon-trash | |
glyphicon glyphicon-home | |
glyphicon glyphicon-file | |
glyphicon glyphicon-time | |
glyphicon glyphicon-road | |
glyphicon glyphicon-download-alt | |
glyphicon glyphicon-download | |
glyphicon glyphicon-upload | |
glyphicon glyphicon-inbox | |
glyphicon glyphicon-play-circle | |
glyphicon glyphicon-repeat | |
glyphicon glyphicon-refresh | |
glyphicon glyphicon-list-alt | |
glyphicon glyphicon-lock | |
glyphicon glyphicon-flag | |
glyphicon glyphicon-headphones | |
glyphicon glyphicon-volume-off | |
glyphicon glyphicon-volume-down | |
glyphicon glyphicon-volume-up | |
glyphicon glyphicon-qrcode | |
glyphicon glyphicon-barcode | |
glyphicon glyphicon-tag | |
glyphicon glyphicon-tags | |
glyphicon glyphicon-book | |
glyphicon glyphicon-bookmark | |
glyphicon glyphicon-print | |
glyphicon glyphicon-camera | |
glyphicon glyphicon-font | |
glyphicon glyphicon-bold | |
glyphicon glyphicon-italic | |
glyphicon glyphicon-text-height | |
glyphicon glyphicon-text-width | |
glyphicon glyphicon-align-left | |
glyphicon glyphicon-align-center | |
glyphicon glyphicon-align-right | |
glyphicon glyphicon-align-justify | |
glyphicon glyphicon-list | |
glyphicon glyphicon-indent-left | |
glyphicon glyphicon-indent-right | |
glyphicon glyphicon-facetime-video | |
glyphicon glyphicon-picture | |
glyphicon glyphicon-map-marker | |
glyphicon glyphicon-adjust | |
glyphicon glyphicon-tint | |
glyphicon glyphicon-edit | |
glyphicon glyphicon-share | |
glyphicon glyphicon-check | |
glyphicon glyphicon-move | |
glyphicon glyphicon-step-backward | |
glyphicon glyphicon-fast-backward | |
glyphicon glyphicon-backward | |
glyphicon glyphicon-play | |
glyphicon glyphicon-pause | |
glyphicon glyphicon-stop | |
glyphicon glyphicon-forward | |
glyphicon glyphicon-fast-forward | |
glyphicon glyphicon-step-forward | |
glyphicon glyphicon-eject | |
glyphicon glyphicon-chevron-left | |
glyphicon glyphicon-chevron-right | |
glyphicon glyphicon-plus-sign | |
glyphicon glyphicon-minus-sign | |
glyphicon glyphicon-remove-sign | |
glyphicon glyphicon-ok-sign | |
glyphicon glyphicon-question-sign | |
glyphicon glyphicon-info-sign | |
glyphicon glyphicon-screenshot | |
glyphicon glyphicon-remove-circle | |
glyphicon glyphicon-ok-circle | |
glyphicon glyphicon-ban-circle | |
glyphicon glyphicon-arrow-left | |
glyphicon glyphicon-arrow-right | |
glyphicon glyphicon-arrow-up | |
glyphicon glyphicon-arrow-down | |
glyphicon glyphicon-share-alt | |
glyphicon glyphicon-resize-full | |
glyphicon glyphicon-resize-small | |
glyphicon glyphicon-exclamation-sign | |
glyphicon glyphicon-gift | |
glyphicon glyphicon-leaf | |
glyphicon glyphicon-fire | |
glyphicon glyphicon-eye-open | |
glyphicon glyphicon-eye-close | |
glyphicon glyphicon-warning-sign | |
glyphicon glyphicon-plane | |
glyphicon glyphicon-calendar | |
glyphicon glyphicon-random | |
glyphicon glyphicon-comment | |
glyphicon glyphicon-magnet | |
glyphicon glyphicon-chevron-up | |
glyphicon glyphicon-chevron-down | |
glyphicon glyphicon-retweet | |
glyphicon glyphicon-shopping-cart | |
glyphicon glyphicon-folder-close | |
glyphicon glyphicon-folder-open | |
glyphicon glyphicon-resize-vertical | |
glyphicon glyphicon-resize-horizontal | |
glyphicon glyphicon-hdd | |
glyphicon glyphicon-bullhorn | |
glyphicon glyphicon-bell | |
glyphicon glyphicon-certificate | |
glyphicon glyphicon-thumbs-up | |
glyphicon glyphicon-thumbs-down | |
glyphicon glyphicon-hand-right | |
glyphicon glyphicon-hand-left | |
glyphicon glyphicon-hand-up | |
glyphicon glyphicon-hand-down | |
glyphicon glyphicon-circle-arrow-right | |
glyphicon glyphicon-circle-arrow-left | |
glyphicon glyphicon-circle-arrow-up | |
glyphicon glyphicon-circle-arrow-down | |
glyphicon glyphicon-globe | |
glyphicon glyphicon-wrench | |
glyphicon glyphicon-tasks | |
glyphicon glyphicon-filter | |
glyphicon glyphicon-briefcase | |
glyphicon glyphicon-fullscreen | |
glyphicon glyphicon-dashboard | |
glyphicon glyphicon-paperclip | |
glyphicon glyphicon-heart-empty | |
glyphicon glyphicon-link | |
glyphicon glyphicon-phone | |
glyphicon glyphicon-pushpin | |
glyphicon glyphicon-usd | |
glyphicon glyphicon-gbp | |
glyphicon glyphicon-sort | |
glyphicon glyphicon-sort-by-alphabet | |
glyphicon glyphicon-sort-by-alphabet-alt | |
glyphicon glyphicon-sort-by-order | |
glyphicon glyphicon-sort-by-order-alt | |
glyphicon glyphicon-sort-by-attributes | |
glyphicon glyphicon-sort-by-attributes-alt | |
glyphicon glyphicon-unchecked | |
glyphicon glyphicon-expand | |
glyphicon glyphicon-collapse-down | |
glyphicon glyphicon-collapse-up | |
glyphicon glyphicon-log-in | |
glyphicon glyphicon-flash | |
glyphicon glyphicon-log-out | |
glyphicon glyphicon-new-window | |
glyphicon glyphicon-record | |
glyphicon glyphicon-save | |
glyphicon glyphicon-open | |
glyphicon glyphicon-saved | |
glyphicon glyphicon-import | |
glyphicon glyphicon-export | |
glyphicon glyphicon-send | |
glyphicon glyphicon-floppy-disk | |
glyphicon glyphicon-floppy-saved | |
glyphicon glyphicon-floppy-remove | |
glyphicon glyphicon-floppy-save | |
glyphicon glyphicon-floppy-open | |
glyphicon glyphicon-credit-card | |
glyphicon glyphicon-transfer | |
glyphicon glyphicon-cutlery | |
glyphicon glyphicon-header | |
glyphicon glyphicon-compressed | |
glyphicon glyphicon-earphone | |
glyphicon glyphicon-phone-alt | |
glyphicon glyphicon-tower | |
glyphicon glyphicon-stats | |
glyphicon glyphicon-sd-video | |
glyphicon glyphicon-hd-video | |
glyphicon glyphicon-subtitles | |
glyphicon glyphicon-sound-stereo | |
glyphicon glyphicon-sound-dolby | |
glyphicon glyphicon-sound-5-1 | |
glyphicon glyphicon-sound-6-1 | |
glyphicon glyphicon-sound-7-1 | |
glyphicon glyphicon-copyright-mark | |
glyphicon glyphicon-registration-mark | |
glyphicon glyphicon-cloud-download | |
glyphicon glyphicon-cloud-upload | |
glyphicon glyphicon-tree-conifer | |
glyphicon glyphicon-tree-deciduous | |
glyphicon glyphicon-cd | |
glyphicon glyphicon-save-file | |
glyphicon glyphicon-open-file | |
glyphicon glyphicon-level-up | |
glyphicon glyphicon-copy | |
glyphicon glyphicon-paste | |
glyphicon glyphicon-alert | |
glyphicon glyphicon-equalizer | |
glyphicon glyphicon-king | |
glyphicon glyphicon-queen | |
glyphicon glyphicon-pawn | |
glyphicon glyphicon-bishop | |
glyphicon glyphicon-knight | |
glyphicon glyphicon-baby-formula | |
glyphicon glyphicon-tent | |
glyphicon glyphicon-blackboard | |
glyphicon glyphicon-bed | |
glyphicon glyphicon-apple | |
glyphicon glyphicon-erase | |
glyphicon glyphicon-hourglass | |
glyphicon glyphicon-lamp | |
glyphicon glyphicon-duplicate | |
glyphicon glyphicon-piggy-bank | |
glyphicon glyphicon-scissors | |
glyphicon glyphicon-bitcoin | |
glyphicon glyphicon-btc | |
glyphicon glyphicon-xbt | |
glyphicon glyphicon-yen | |
glyphicon glyphicon-jpy | |
glyphicon glyphicon-ruble | |
glyphicon glyphicon-rub | |
glyphicon glyphicon-scale | |
glyphicon glyphicon-ice-lolly | |
glyphicon glyphicon-ice-lolly-tasted | |
glyphicon glyphicon-education | |
glyphicon glyphicon-option-horizontal | |
glyphicon glyphicon-option-vertical | |
glyphicon glyphicon-menu-hamburger | |
glyphicon glyphicon-modal-window | |
glyphicon glyphicon-oil | |
glyphicon glyphicon-grain | |
glyphicon glyphicon-sunglasses | |
glyphicon glyphicon-text-size | |
glyphicon glyphicon-text-color | |
glyphicon glyphicon-text-background | |
glyphicon glyphicon-object-align-top | |
glyphicon glyphicon-object-align-bottom | |
glyphicon glyphicon-object-align-horizontal | |
glyphicon glyphicon-object-align-left | |
glyphicon glyphicon-object-align-vertical | |
glyphicon glyphicon-object-align-right | |
glyphicon glyphicon-triangle-right | |
glyphicon glyphicon-triangle-left | |
glyphicon glyphicon-triangle-bottom | |
glyphicon glyphicon-triangle-top | |
glyphicon glyphicon-console | |
glyphicon glyphicon-superscript | |
glyphicon glyphicon-subscript | |
glyphicon glyphicon-menu-left | |
glyphicon glyphicon-menu-right | |
glyphicon glyphicon-menu-down | |
glyphicon glyphicon-menu-up |
Использование шрифта Genericons на вашем сайте
Я считаю, что иконочные шрифты – одна из величайших идей, когда-либо рождавшихся в золотой век веб-дизайна.
Некоторые великие парни из Automattic, вероятно, чувствуют то же самое, поскольку они решили придумать хороший шрифт для иконок под названием Genericons . В этой статье мы узнаем, как выглядят великолепные иконки и как использовать шрифт Genericons.
Как я уже сказал, мы живем в золотой век веб-дизайна. Новые технологии рождаются каждый день, и браузеры быстро принимают их. В дополнение к новым технологиям во всем мире появляются новые методы проектирования.
В эту золотую эпоху адаптивный веб-дизайн, возможно, является одним из самых популярных концепций. В мире, полном различных устройств, которые подключаются к Интернету, таких как ноутбуки, планшеты и смартфоны, наши дизайны формируются в соответствии с размерами устройства и плотностью пикселей. Как веб-дизайнеры, стало привычкой перемещать элементы и масштабировать графику, чтобы наш дизайн работал на самых разных устройствах, от 27-дюймовых мониторов Apple до Kindles.
Вот где иконки шрифты пригодятся.
Преимущества использования Icon Fonts
В качестве подарка от адаптивного веб-дизайна иконки-шрифты используются, чтобы предложить оптимизированный и масштабируемый пакет графики посетителям на любом устройстве. Кроме того, их кросс-браузерная совместимость позволяет нам заставить их работать даже в старых браузерах, поэтому наши дедушка и бабушка и сотрудники DMV могут также наслаждаться свежими, совершенно новыми иконками!
Не говоря о шутках, вот основные преимущества, которые вы можете получить с помощью шрифта значка:
- Иконочные шрифты являются масштабируемыми. Это означает, что независимо от того, насколько велика ваша иконка, вам не нужно идти на компромисс по качеству изображения или размеру файла.
- Иконочные шрифты могут быть улучшены с помощью простых строк CSS. Вам не нужно открывать свой большой старый редактор изображений, чтобы изменить их цвета или добавить к ним тени. Прозрачность? Проверьте. CSS градиенты? Проверьте. 3D вращение? Проверьте. Вы поняли идею. С помощью нескольких строк кода CSS вы можете делать практически все, что вы можете сделать со своим текстом. В конце концов, эти значки технически являются кусочками текста.
- Иконочные шрифты имеют отличную поддержку браузера. Поскольку они являются шрифтами, и даже Internet Explorer 7 поддерживает шрифты, вам не нужно беспокоиться о том, не появятся ли они в старых браузерах.
- Иконки шрифтов имеют небольшой размер. Это может звучать как спорный аргумент (поскольку пакет значков PNG может быть почти таким же маленьким, как и шрифты значков), но вы можете видеть, что формат Genericons в формате WOFF, например, имеет размер файла всего 11 КБ. Кроме того, вы должны включить такие вещи, как
my-icon-2x.pngесли вам нужны большие изображения. Кроме того, шрифты значков делают только один HTTP-запрос.
CSS градиенты? Проверьте. 3D вращение? Проверьте. Вы поняли идею. С помощью нескольких строк кода CSS вы можете делать практически все, что вы можете сделать со своим текстом. В конце концов, эти значки технически являются кусочками текста.Крис Койер (Chris Coyier) имеет демонстрационную страницу со шрифтами значков, где он рассказывает о некоторых преимуществах значков шрифтов и позволяет попробовать их.
Genericons – это отличный шрифт для значков, созданный Automattic , также основателем WordPress. На конец 2013 года шрифт включает 121 иконку, и время от времени он растет. Он также лицензирован по лицензии GPL, поэтому мы можем использовать этот замечательный набор иконок во всех наших проектах с открытым исходным кодом и совместимыми лицензиями.
Если вы не используете значок шрифта на своем сайте WordPress, сейчас самое время включить Genericons!
Включая это в вашу тему
Если вы хотите использовать этот значок шрифта в своей теме, выполните несколько простых шагов:
- Скачать Genericons , нажав гигантскую кнопку Скачать на сайте.
- Загрузите папку со шрифтами в корневую папку вашей темы. Если вы хотите, вы можете переименовать папку и поместить ее в другую папку.
- Скопируйте содержимое файла genericons.css в файл style. css вашей темы. (Если вы изменили имя и путь к папке шрифтов, не забудьте внести изменения в CSS, чтобы исправить путь к файлам шрифтов.)
css вашей темы. (Если вы изменили имя и путь к папке шрифтов, не забудьте внести изменения в CSS, чтобы исправить путь к файлам шрифтов.)Вот и все, ваша тема теперь на 100% совместима с Genericons! Теперь вы можете использовать значки в ваших HTML-элементах следующим образом:
1 | <a class="genericon genericon-tablet" |
Если вы хотите использовать значок в качестве отдельного элемента, вам нужно использовать элемент <i> HTML, например:
1 | <a href="http://tutsplus.com/"><i class="genericon genericon-tablet"></i> |
Обратите внимание, что вам нужно использовать два класса CSS: genericon и genericon-{icon-name} .
Я не собираюсь вставлять имена значков в эту статью (потому что новые значки добавляются в шрифт регулярно), но вы можете увидеть категоризированный список имен значков в файле genericons.css . Кроме того, вы можете проверить genericons.com и нажмите на каждый значок, чтобы увидеть соответствующее имя.
Использование его с плагином Genericon’d
Если вы не хотите интегрировать шрифт в свою тему и использовать пакет значков с отдельным плагином, вы можете использовать плагин Genericon на wordpress.org .
Использование практически такое же – вам просто нужно добавить еще один класс с именем genericond :
1 2 | <a class="genericond genericon genericon-tablet" <a href="http://tutsplus.com/"><i class="genericond genericon genericon-tablet"></i> |
Кроме того, вы можете использовать короткий код:
1 | <a href="http://tutsplus. |
com/">[genericon icon=tablet] This link has the tablet icon, too!</a>Обратите внимание, что на этот раз вам нужно использовать только имя иконки.
Иконочные шрифты популярны по ряду причин: их масштабируемость, простота использования и обратная совместимость. С небольшим файлом каждый веб-дизайнер и разработчик может извлечь выгоду из этой удивительной маленькой техники.
Что вы думаете о дженериках? Поделитесь своими комментариями с нами ниже! И если вам понравилась статья, поделитесь ей, чтобы ваши друзья тоже узнали о Genericons!
Самые Лучшие Бесплатные И Платные Иконочные Шрифты
Мы рассказываем о лучших сервисах, представляющих иконки для веб-разработки, описываем плюсы и минусы каждого каждого из них, и предлагаем Вам выбрать лучший из них.
Ищете уникальные иконки для вашего сайта? Постоянно натыкаетесь на Font Awesome, но не находите на нём ничего интересного? Тогда обязательно прочитайте эту статью — здесь мы рассказываем, что такое иконочный шрифт, описываем множество бесплатных сайтов с ним, а также даём образцы иконок каждого сервиса.
Сделайте свой выбор для создания уникального образа!
Лучшие альтернативы Font Awesome
В веб-дизайне давно используются иконочные шрифты для подбора красивых значков для сайта. Иконочный шрифт — это набор символов, преобразованных в изображения разной тематики. Такой шрифт на самом деле является текстовым файлом, превращающимся в картинки при помощи CSS.
Плюсы использования иконочных шрифтов
- Их можно видоизменять любым образом: указать размер, цвет, фон, тень, градиент, применить псевдо-классы: hover или focus — чтобы создать свой собственный стиль.
- Их можно анимировать.
- Увеличение или уменьшение размера иконки не влияет на качество, поэтому они корректно отображаются даже на Retina-дисплеях.
- По сравнению с обычными изображениями, они меньше весят и быстрее загружаются.
- Для загрузки иконочных шрифтов нужен лишь один HTTP запрос, что может многократно увеличить скорость загрузки страниц на сайте.
- Они поддерживаются всеми браузерами (даже очень старыми версиями).
В настоящее время самым популярным шрифтом является Font Awesome. Он известен почти каждому, кто хоть раз занимался разработкой сайтов. Он изначально создавался под Bootstrap, но сейчас стал самостоятельной библиотекой значков и изображений, насчитывающей более 600 иконок.
Однако несмотря на это, существуют множество сайтов с похожим контентом. Бесплатные или платные шрифты других издателей также имеют свои уникальные значки, которые удобно использовать при выборе собственного логотипа для сайта. О них мы и расскажем Вам в этой статье — о лучших и самых полных иконочных шрифтах, которые могут подойти Вам как альтернатива Font Awesome.
Бесплатные наборы шрифтов
1. WebHostingHub Glyphs
Один из самых больших наборов иконок, он насчитывает 2075 картинок. Есть возможность скачивать их в формате PNG двух размеров (16 и 32 пикселя). Можно изменять цвет значков, их размеры, как и во многих других наборах иконок. На сайте даже есть наглядный пример, как это можно сделать: четыре ползунка рядом со случайной картинкой определяют её размер, цвет, тень и фокус тени.
Сайт на самом деле очень удобный и понятный даже ребенку. Все иконки разделены на категории, несколько раз встречаются кнопки скачивания всего шрифта одним файлом, а внизу есть подробная инструкция с примерами, как правильно использовать в своём коде данный иконочный шрифт.
WebHostingHub Glyphs
WebHostingHub Glyphs2. Dashicons – The Official WordPress
Dassicons — это шрифт иконы, разработанный Mel Choyce, специально для того, чтобы набрать новый интерфейс Admin WP. Это отличная альтернатива Awesome Font, которая стоит проверить.
Одна из замечательных вещей в jassicons для WordPress заключается в том, что значки, доступные для отбора, организованы в категории, что позволяет легко найти тип значков, который вы хотите. с одним взглядом. Инструмент даже поставляется с панелью поиска фильтра, и каждый значок пронумерован, чтобы облегчить их найти.
На данный момент библиотека Dashicons WordPress содержит 197 иконок, которые делятся на 15 разделов:
- Admin Menu;
- Welcome Screen;
- Post Formats;
- Media;
- Image Editing;
- TinyMCE;
- Posts Screen;
- Sorting;
- Social;
- WordPress. org Specific: Jobs, Profiles, WordCamps;
- Products;
- Taxonomies;
- Widgets;
- Notifications;
- Misc.
org Specific: Jobs, Profiles, WordCamps;Компания регулярно выпускает обновления с добавлением новых картинок, а также с улучшенными возможностями системы. Однако в этом сборнике все же недостаёт некоторых иконок, например, социальных сетей.
На официальном сайте вы увидите вот такой интерфейс. При нажатии на понравившийся значок он появится в хидере рядом с его ссылками в нескольких форматах: CSS, HTML и Glyph.Dashicons – The Official WordPress
Dashicons – The Official WordPress3. Ionicons
Эта альтернатива Font Awesome представляет 528 разнообразных иконок, которые подойдут для различных меню, внутренних списков и вкладок. Девиз компании гласит: Изготовлено с любовью вручную. В это можно поверить, обратив внимание, с какой детализацией выполнены эти значки.
Ionicons выпускают свои иконки для использования в мобильных приложениях на IOS, Android, веб-приложениях и настольных ПК.
Они имеют открытый код, который сильно облегчают работу по оформлению сайта. Как это выглядит, показано на скриншоте ниже.
Ionicons — продукт компании Ionic, которая создаёт не только значки для сайтов, но и предлагает пользователям целый набор удобных для разработчиков сайтов продуктов. Они позволят Вам создавать, защищать и доставлять приложения корпоративного уровня на любой платформе.
Ionicons
4. Стандартные символы HTML
Помимо специально созданных сервисов, не стоит забывать об абсолютно бесплатном сборнике разнообразных иконок HTML. Вы можете изменять их размер и цвет, сохраняя хорошее качество изображения.
Все иконки выполнены толстой линией, а код открыт для каждого. По нашему мнению, стандартные символы HTML — замечательная альтернатива Font Awesome.
Стандартные символы HTML
Стандартные символы HTML
Стандартные символы HTML5. Linea Iconset
Linea Iconset имеет в своём ассортименте 716 значков, с помощью которых можно наладить лучший контакт с пользователем, ведь в современном мире много слов и текста ни к чему.
Данный сайт предлагает скачать целым паком сборник иконок по направлениям, например, Музыка, Электронная торговля и другие. Сами иконки выглядят как линии, образующие рисунок того или иного значения.
Кроме этого, официальный сайт Linea Iconset предлагает Вам ещё десяток сайтов, где можно найти бесплатные иконки для веб-разработки. Их мы не будем перечислять именно по этой причине.
Linea Iconset
Linea Iconset6. Android Icons
Прекрасный добрый сервис, встречающий гостей большим сердцем и благодарностью. В своей библиотеке имеет 250 символов, которые можно использовать абсолютно бесплатно — ведь Android Icons имеет открытый код, — а с помощью CSS их можно изменять: менять размеры, формы, цвета.
Сайт интуитивно понятен, код символов доступен даже без скачивания целого пака значков. Некоторые из них вы видите на фото ниже.
Android Icons
Android Icons7. Themify Icons
Этот сервис предлагает полный набор значков для использования в веб-дизайне и приложениях.
Все 320 иконок поделены на группы, такие как Стрелки направления, Иконки веб-приложений, Текстовый редактор и другие.
Themify Icons работает на обеспечении WordPress, так что их значки можно легко использовать на любой теме WordPress: для добавления в меню, заголовок виджета или других.
Themify Icons
Themify Icons8. StackIcons
Хоть сайт и предлагает немного вариантов иконок (всего 60), они очень яркие и красочные, а также легко меняют цвет, объем, объединяются с другими символами, размер может увеличиваться или уменьшаться без потери качества изображения. Иконки идеально подходят до большинства современных социальных брендов: от App.net до Zerply. Для внутренних ссылок контактов компании StackIcons подходит как никто другой.
StackIcons
StackIcons9. GitHub’s Octicons
Эти значки делиться на два формата: 16 и 24 пикселя. Несмотря на то, что в этих списках представлены разные иконки, каждый из них можно представить в большем или меньшем виде.
Всего библиотека сайта насчитывает около 250 изображений, зашифрованных в текстовые файлы.
GitHub’s Octicons создаёт свои уникальные иконки с открытым кодом, позволяя пользователю копировать или скачать код в формате SVG, а также Ruby, Jekyll и React.
GitHub’s Octicons
GitHub’s Octicons10. Material Design Iconic Font
Material Design Iconic Font позволяет использовать множество иконок, подходящих для Google, в различных цветах. Этот шрифт создан дизайнером Google Material на основе CSS, то есть Вы можете проводить все операции, доступные в этом языке программирования, с предлагаемыми иконками.
Все 777 значков доступны абсолютно бесплатно, а подробное описание, как использовать код каждого изображения, находится на главной странице официального сайта. Даже начинающий веб-дизайнер без проблем сможет использовать этот набор в своей работе.
Material Design Iconic Font
Material Design Iconic FontПлатные шрифты
1.
IcoMoon Сервис имеет в своих хранилищах более 1600 иконок, и предлагает попробовать бесплатную версию, включающую в себя лишь 490 образцов. За полный пакет услуг с премиум-условиями, с множеством векторных форматов и фигурами Photoshop, сайт просит 59$. Эти деньги находятся на двухнедельной гарантии.
Конечно, вы можете видоизменять купленные наборы иконок по своему желанию. Здесь вы сможете создать свой уникальный стиль, не прикладывая много усилий.
IcoMoon
IcoMoon2. Streamline
Данный сервис представляет более 75000 (!) разнообразных иконок. Они поражают своей необычностью, яркостью и разнообразием настолько, что влюбляешься в них с первого взгляда.
Streamline Icons — один из немногих сервисов, позволяющий работать с Sketch, благодаря чему можно изменять цвет иконок и толщину их линий. На сайте каждый образец представлен в трёх видах: Light, Regular и Bold. Streamline имеет пробную бесплатную версию, но также предлагает приобрести платные пакеты услуг.
Например, сразу весь набор значков можно приобрести за 228$ в год. С этим пакетом идут векторные файлы в формате SVG и PDF, высокое разрешение изображения, право на пользование продукцией без указания автора.
Streamline
Streamline3. Flaticon
«Флаги стран», «Социальные Медиа», «Бизнес Аналитика» — только малая часть непопулярных разделов символов на этом сервисе. Необычные иконки насчитывают невообразимые 108 683 набора, созданные профессиональными дизайнерами и простыми пользователями. Вы тоже можете создать свой собственный набор иконок и продать его на этом же сайте.
Формат файлов тоже разнообразен: PNG, PSD, SVG, EPS, и BASE 64. Вы можете легко импортировать значки в Illustrator, After Effects и Photoshop.
Премиум пакет стоит 40,50 € в месяц, и даёт доступ к эксклюзивным иллюстрациям, полному праву в части лицензирования, а также убирает рекламу. Бесплатные образцы тоже есть, и их неожиданно много для одного сайта: более 2 миллионов.
Ежемесячно создатели добавляют новые иконки, так что коллекция не ограничена этой цифрой.
Flaticon
Flaticon4. Smashicons
Smashicons всего за 5$ в месяц открывает доступ ко всем уже имеющимся иконкам, а также к тем, что будут добавлены в будущем. Все иконки представлены в виде редактируемых векторов в двух форматах: PNG и SVG. Постоянно добавляются новые иконки, а также появились открытые ресурсы для дизайна. Smashicons предлагает вам 174 ресурса для Ваших творческих проектов.
Smashicons
SmashiconsЗаключение
В интернете можно легко найти множество сервисов, которые бесплатно или платно дают всем желающим тысячи красивых иконок. С их помощью можно оформить сайт или страницу в социальной сети. Альтернативы Font Awesome много, но, к сожалению, русскоязычных сайтов мало. Хотя даже без перевода понятно, как найти нужный значок и код для него. Font Awesome — не единственный сервис, достойный внимания, и с каждым днём появляется всё больше новых сайтов с уникальными изображениями.
PDF: Самые Лучшие Бесплатные И Платные Иконочные Шрифты — Альтернативы Font Awesome
⏧ Альтернатива Font Awesome, ⏧ альтернативы Font Awesome, ⏧ Шрифты веб-иконок, ⏧ лучший иконочный шрифт для веб-сайта
Как залить шрифт в фигму
Как добавить шрифт в фигму (Figma) за 2 минуты. Видео инструкция.
В этой статье и видео уроке вы узнаете, как добавить шрифт в фигму (Figma) буквально за пару минут. Это быстрая, пошаговая инструкция.
Если вы задаётесь вопросами как установить, загрузить, скачать и добавить новые шрифты в фигму, то посмотрите видео выше или воспользуйтесь текстовым руководством внизу.
Как установить шрифт в фигму в браузереСперва отмечу, что если вы установите десктопную версию программы Figma, то у вас будут отображаться все установленные шрифты, которые есть на вашем компьютере.
Если вы привыкли работать в браузере и хотите, чтобы шрифты, которые установлены у вас на компьютере отображались в браузерной версии программы, то вам необходимо установить специальное расширение «Font installer».
- Для установки Font Installer перейдите по адресу: https://www.figma.com/downloads/
- Справа выберите нужную операционную систему. Windows или MacOs и скачайте приложение.
- Установите приложение Font Installer и все шрифты с вашего компьютера будут отображаться в браузерной версии Figma.
Чтобы добавить новый шрифт в фигму, скачайте файл шрифта в формате «Otf». Например возьмем шрифт gilroy. Кликните на файл шрифта 2 раза и нажмите на кнопку установить. После этого можно перезагрузить фигму и этот шрифт появиться в вашей программе.
Какие шрифты лучше устанавливать в фигму?Если вы задаетесь вопросом, «Какой бы лучше шрифт подобрать и установить в фигму, чтобы он был максимально необычным, креативным и красивым», то отбросьте эту идею.
Помните, что главное правило типографики — это достижение максимальной удобочитаемости.
Удобочитаемость — это скорость распознавания отдельных знаков и текста в целом. Если шрифт сложно разобрать и скорость чтения будет падать, то это плохой шрифт. Используйте максимально простые шрифты, которые уже есть в фигме.
Не забывайте зачем нужен текст. Для того, чтобы его читать. Он не должен быть элементом украшательства и нести в себе какой-то смысл. Не нужно перегружать этим людей. Люди хотят получать информацию с помощью текста и это должно стоять на первом месте.
Шрифты, которые я рекомендую использовать в Figma:- Montseratt
- Open Sans
- Raleway
- Roboto
- Noto sans
- Ubuntu
- Oswald
- Rubik
- Bebas Neue
- Pt sans
- Pt serif
- Playfair display
Сегодня вы узнали больше о программе и разобрались, как добавить шрифт в фигму. Смотрите больше материалов на нашем сайте. Если есть вопросы, то обязательно пишите их ниже в комментариях.
Как загрузить шрифты в Figma
Фигма, как ты знаешь, работает в облаке, будь то десктопная или браузерная версия. Работа в обоих версиях особо не отличается, есть только небольшая разница в подключении шрифтов.
Шрифты в десктопной версии Фигма
В этой версии программы подтягиваются все шрифты с твоей локальной машины + шрифты из гугл.фонтс. Все, что есть в этой библиотеке уже автоматически есть и у тебя в фигме. То есть, чтобы фигма отображала какой-то шрифт он должен быть установлен у тебя на компьютере или находиться на сайте гугл фонтс..
Как установить шрифты на пк? очень просто. Качаешь нужный шрифт, распаковываешь его. После находишь папку со шрифтами на своем пк (можно воспользоваться поиском) и просто перетаскиваешь распакованный шрифт в папку со своими локальными шрифтами. Конечно же, чтобы Figma их увидела нужно будет перезагрузить программу.
Подключить локальные шрифты в браузерную версию Figma
Тут все немного сложнее, но то же просто) нужно зайти в настройки своего аккаутна из браузерной версии вот тут
Найти там пункт fonts и кликнуть на большую синюю кнопку
Загрузив утилиту у тебя появится примерно такое сообщение
Вот видишь, наверное, у меня 466 шрифтов на локальной машине, которые теперь тоже подтягиваются в Фигма.
Иконочный шрифт в Фигма
Но и это еще не все. Ты всегда можешь использовать иконочный шрифт в фигма, типа фонтаусом и ему подобные. При этом ты можешь сам создавать свои иконочные шрифты вот на этом сервисе icomoon.io. Тупо заливай туда свои свг, превращай в шрифт и загружай его себе на комп. Понятное дело, что Фигма подтянет их и у тебя будет свой собственный уникальный иконочный шрифт. Круто, правда?
Читай о том, как сделать Фигму на русском и как поменять хот кеи в программе.
Как добавить шрифт в Figma с компьютера и в браузере за 2 минуты
Из этой статьи вы узнаете, как добавить шрифт в figma (с компьютера и в браузере), как установить иконочный шрифт в фигме и какие шрифты лучше всего использовать при работе с дизайном.
Шрифты и типографика в целом — это важная составляющая любого дизайна. С помощью шрифтов можно создавать определенное настроение у пользователя, управлять удобством восприятия контента и передавать мета-сообщение тематики сайта.
Особенностью фигмы является то, что она синхронизирует все шрифты с сервисом google fonts. То есть все те шрифты, которые присутствуют на этом сервисе, автоматически доступны и в figma. Это очень удобно, потому что нет необходимо их отдельно скачивать.
Как добавить шрифт в Figma с компьютера
Если вы используете приложение фигмы, то помимо шрифтов из сервиса google fonts, у вас доступны все те шрифты, которые установлены на вашем компьютере. Если вы хотите использовать какой-то декоративный шрифт, которого нет на гугл фонтс, то сначала вам нужно установить его себе на компьютер. Затем перезагрузить программу и шрифт станет доступен для работы.
Как установить шрифт себе на компьютер? Очень просто. Скачиваете нужный вам шрифт, распаковываете архив, переходите в папку со шрифтом, выбираете шрифт (один или несколько), нажимаете правой кнопкой мыши и выбираете пункт «Установить для всех пользователей».
Можете устанавливать по одному, а можете выбрать сразу все и установить все разом.
Помимо этого, можно просто перенести нужные вам шрифты в локальную папку со шрифтами на вашем компьютере. На windows она находится в «Панели управления». Если вы используете 10-ку, то сперва переключите вид на «Мелкие значки», тогда вы сразу увидите нужную вам папку.
Выбираете необходимые шрифты и переносите их туда. Либо стандартным сочетанием клавиш ctrl+c/ctrl+v.
Как добавить шрифт в Figma в браузере
При использовании сторонних шрифтов (не с гугл фонтс) у вас могут возникнуть проблемы при открытии макета в браузере. Браузер изначально подтягивает только шрифты из сервиса google fonts. Других он не видит и поэтому может возникнуть конфликт. Чтобы этого избежать, нужно провести некоторые манипуляции.
Во-первых, зайти через браузер в свой аккаунт фигмы и перейти в свой профиль.
Спустится немного нижи и найти пункт «Fonts» с большой синей кнопкой
Скачиваете эту утилиту и устанавливаете ее, следуя инструкции. Весь процесс занимает буквально 2 минуты.
После установки, у вас подтянутся все локальные шрифты, которые находятся на вашем компьютере.
Теперь можете без проблем пользоваться ими и в браузерной версии программы. Бинго!
Как работать с отсутствующими шрифтами в Figma
Если вы откроете макет, в котором используются шрифты, отсутствующие у вас, то фигма выдаст вам предупреждение об этом.
Это происходит по причине того, что у вас нет этого шрифта в системе, либо есть, но называется по-другому (такое бывает). Чтобы это исправить, вам нужно либо установить себе на компьютер нужный шрифт (после этого не забудьте перезагрузить программу), либо заменить его другим похожим.
После замены, во всех макетах автоматически обновятся шрифты. Но будьте с эти аккуратны, потому что каждый шрифт имеет свою размерность и если размеры шрифтов у вас не совпадут, то во всем макете «поплывут» отступы до элементов. Придется вручную все выравнивать.
Проще и быстрее, при возникновении подобного предупреждения, скачать и установить требуемый шрифт себе на компьютер.
Так вы избежите лишнего геморроя.
Как добавить иконочный шрифт FontAwesome в Figma
Помимо стандартных шрифтов есть возможность загрузить иконочные шрифты от популярного сервиса Font Awesome. Для тех, кто не знает, Font Awesome — это сервис, который позволяет вставлять иконки через обычный шрифт, а не через файл svg. Это бывает удобно, когда лень скачивать какую-то иконку. Вместо этого можно просто ее «написать».
Для этого нам нужно сначала установить иконочный шрифт себе на компьютер. Переходите на официальный сайт fontawesome.com в раздел «Start»
Спускаетесь вниз и находите пункт «Desktop»
И далее нажимаете на кнопку «Download for free»
У вас скачается шрифт и вам нужно просто установить его себе на компьютер по тому принципу, который мы рассматривали в начале статьи. При распаковке, шрифты будут находиться в папке otfs, там их 3 штуки, все 3 и надо установить.
Принцип работы иконочного шрифта в Фигме
Для начала создайте текстовую пустую область с помощью инструмента «Text».
Далее перейдите на сайт fontawesome.com. Там будут все иконки, которые доступны для использования. Они подразделяются на 3 вкладки «Solid», «Regular» и «Brands».
Solid — это иконки с заливкой, Regular — с обводкой, а Brands — иконки брендов. В зависимости от типа иконки вам нужно выбирать и соответствующий шрифт в фигме. Для использования нужно выделить иероглиф иконки и выбрать пункт «Копировать».
Далее перейти в figma и в текстовый контейнер вставить нашу иконку.
У нас ничего не отображается, потому что выбран шрифт «Roboto». Нам нужно выбрать шрифт Font Awesome. Я копировал иконку из раздела «Solid», поэтому именно такой шрифт я и выбираю. После этого моя иконка корректно отобразится.
Чтобы манипулировать размерами иконки, нужно изменять размеры шрифта. Помимо этого, вы можете легко перевести иконку в вектор и пометить для экспорта. Для этого достаточно выбрать текстовый контейнер и нажать сочетание клавиш Ctrl+Shift+O.
Какие шрифты использовать в дизайне
Существует огромное количество шрифтов и сервисов по их бесплатному скачиванию. Начинающие дизайнеры, вдохновившись какими-нибудь экзотическими шрифтами, пытаются найти и скачать их себе для использования в дизайне.
Но здесь есть 2 нюанса. Во-первых, все те шрифты, которые вы скачиваете на сомнительных сайтах являются пиратскими со всеми вытекающими. Используя их в дизайне, особенно коммерческом, вы подставляете клиента.
Во-вторых, главная функция шрифта — быть удобочитаемым, чтобы посетитель мог без напряга прочитать текст. Различные экзотические шрифты не всегда могут похвастаться подобным функционалом.
Проще всего, использовать шрифты с сервиса google fonts. Они и бесплатные и их можно легко подключить к проекту при разработке. Но единственный минус — шрифтов с поддержкой кириллицы не так много.
Заключение
В этой статье я рассказал вам как добавить шрифт в figma (с компьютера и в браузере), как установить иконочный шрифт в фигме и какие шрифты лучше всего использовать при работе с дизайном.
Если хотите освоить Figma на профессиональном уровне, тогда рекомендую пройти курс «Figma с 0 до PRO», на котором вы научитесь создавать интерактивные прототипы, передавать макеты разработчикам и экономить время на рутинных задачах.
В ней я рассказываю свою историю, как мне удалось стать дизайнером с полного нуля и как бы я сегодня действовал, если бы начинал все с «чистого листа».
Прекращение использования шрифтов-иконок. Автор: Майкл Иригойен. Однако прошло почти 22 года, прежде чем иконочные шрифты стали тенденцией дизайна в Интернете.
Введение правила CSS @font-face позволило веб-дизайнерам указывать собственные шрифты для отображения текста. К 2011 году его поддерживали все основные браузеры. Это породило идею о том, что шрифты, состоящие из пиктограмм, например, Wingdings можно использовать вместо растровых изображений в Интернете. Учитывая, что реальная поддержка SVG во всех основных браузерах не была стабильной до начала 2020 года, иконочные шрифты де-факто были способом добавления векторных значков на ваш веб-сайт.
Но иконочные шрифты в Интернете с самого начала имели фундаментальные недостатки. И теперь, когда в нашем распоряжении полная поддержка SVG, пришло время положить конец их использованию раз и навсегда.
Неверные шрифты значков
Flash of Unstyled Content (FOUC)
При использовании @font-face вы указываете браузеру сделать HTTP-запрос для требуемого файла шрифта. Этот запрос также не отправляется немедленно. Когда браузер начинает анализировать HTML и все связанные файлы, на которые есть ссылки в разметке, он строит объектную модель документа (DOM) в реальном времени. Когда связанный шрифт найден, запрос запускается. Время, необходимое для извлечения шрифта, может зависеть от размера ресурса шрифта, условий сети и аппаратного обеспечения пользователя.
В ожидании актива шрифта браузер выберет отображение текстового содержимого HTML перед его фактическим получением. Это приводит к миганию нестилизованного содержимого (FOUC).
Эти вспышки могут сильно раздражать посетителей. Иконочные шрифты обычно назначают свои глифы кодовым точкам за пределами нормального диапазона, в котором работает большинство обычных шрифтов. Однако, если это не так, возможно, что случайные символы или глифы появятся вместо ваших значков до того, как шрифт будет полностью загружен.
Примечание : можно использовать более новые директивы, такие как
preload, для ресурсов шрифтов, чтобы избежать FOUC. Однако это не решает всех других проблем, определенных в этой статье, и не рекомендуется.
Специальные возможности
Иконочные шрифты общеизвестно плохи для специальных возможностей и могут вызвать разочарование у тех, кто полагается на вспомогательные технологии.
Обрабатывается как текст — Браузер обрабатывает шрифты как текст, потому что именно такими шрифты и должны быть. Программы чтения с экрана с годами становятся все умнее, но им все еще трудно отличить разборчивый текст от пиктограммы.
Большинство программ чтения с экрана читают вслух текст, вставленный с помощью CSS, поэтому, когда они натыкаются на ваши значки, они могут сказать «непроизносимо» или могут быть полностью пропущены.Таблица стилей переопределяет — Люди с нарушениями зрения часто используют пользовательские таблицы стилей для переопределения стилей по умолчанию посещаемых веб-сайтов, чтобы упростить их использование. Это может включать изменение цветовых схем, увеличение размера или веса шрифта или даже полное изменение начертания шрифта. Если ваш сайт использует значки вне контекста, кто-то, использующий вспомогательный шрифт (например, OpenDyslexic), заменит ваши значки и полностью исчезнет, что может привести к тому, что ваш веб-сайт станет непригодным для использования.
Невозможно предоставить метаданные — Процесс внедрения иконочного шрифта в Интернете требует использования псевдоэлементов
::beforeили::after. Семантически псевдоэлементы ::beforeи::afterпредназначены для добавления косметического содержимого к существующему элементу. Для иконочных шрифтов это имеет смысл, если иконка используется в контексте с другим элементом. Однако во многих случаях значок используется в качестве основного фокуса. Например, «x» для «закрыть» или дом для возвращения «домой». Сами по себе эти значки не предоставляют никакой семантической информации о своем содержимом; Вы не можете пометить их или описать напрямую.
Большинство программ чтения с экрана читают вслух текст, вставленный с помощью CSS, поэтому, когда они натыкаются на ваши значки, они могут сказать «непроизносимо» или могут быть полностью пропущены.
Семантически псевдоэлементы Размер и ремонтопригодность
Иконочные шрифты недешевы. Каждый раз, когда посетитель загружает ваш иконочный шрифт, он загружает каждую иконку, которую вы собираетесь использовать в любом месте вашего сайта, независимо от того, видят они их все или нет. Один только этот факт делает иконочные шрифты сложными и довольно раздражающими в обслуживании. Если ваш иконочный шрифт содержит 200 иконок, а вы используете 10 из них, вы вынуждаете своих посетителей загружать 190 иконок, которые они никогда не увидят.
Это ухудшит впечатление от вашего посетителя, увеличив время загрузки и расширив FOUC.
Поддержание иконочного шрифта означает добавление и удаление значков по мере необходимости, чтобы размер шрифта и последующих таблиц стилей был минимальным. Это также означает, что каждый раз, когда вы обновляете свой шрифт, вам необходимо аннулировать кеш ваших ресурсов посетителя и заставлять их повторно загружать их.
Ухудшение визуального качества
Все современные браузеры и операционные системы в той или иной степени используют сглаживание текста. Текстовое сглаживание не зависит от того, состоит ли ваш шрифт из букв и цифр или пиктограмм. Это может привести к негативным побочным эффектам с точки зрения визуального качества, особенно если вы складываете глифы для создания многоцветных значков. Ваши значки могут выглядеть размытыми или смещенными.
Трудно стилизовать/позиционировать
Как будто я еще недостаточно сказал, иконочные шрифты — это в первую очередь шрифты, а во вторую — иконки.
Это означает, что ваши значки следуют текстовым правилам CSS, таким как размер шрифта , межбуквенный интервал , высота строки и т. д. Это может сделать позиционирование значков более сложным и менее последовательным. Кроме того, глифы шрифтов значков являются монохромными, что означает, что любые внесенные вами стилистические изменения влияют на весь глиф.
SVG спешат на помощь!
С выпуском версии браузера Microsoft Edge на платформе Chromium в начале 2020 года масштабируемая векторная графика (SVG) стала полностью поддерживаться во всех основных браузерах. Даже до этого SVG поддерживались во всех браузерах с 2012 года, хотя и с некоторыми оговорками относительно масштабирования в Internet Explorer и до Chromium Edge. И угадайте, что? SVG — это потрясающих веб-иконок!
Icons Just Work
Данные изображения SVG хранятся непосредственно в вашем HTML-документе. Как только браузер его обрабатывает, он отображает его.
Вам не нужно ждать завершения других HTTP-запросов, как в случае с иконочным шрифтом.
Лучшая доступность
SVG имеют встроенные специальные возможности, которые дают им преимущество перед использованием шрифтов-иконок.
- Семантически являются элементами изображения.
- Предоставить метаданные очень просто. Просто укажите элемент
</code> или <code> <desc> </code> в контейнере SVG. Программы чтения с экрана подберут эти значения и прочитают что-то полезное для вашего посетителя. А поскольку SVG — это всего лишь элементы вашего HTML, вы можете использовать атрибуты ARIA, такие как <code> aria-labeled by </code> с легкостью.</li></ul><h4 tabindex="-1"><span class="ez-toc-section" id="i-21"> Проще поддерживать </span></h4><p> По сравнению с один к одному коллекция из 100 SVG по сравнению с WOFF2 из 100 глифов значков будет больше. Однако преимущества SVG легко перевешивают реализацию иконочного шрифта.</p><p> При использовании SVG вы будете включать только те значки, которые необходимы для этой отдельной страницы, прямо в ваш код.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/originals/40/4f/6d/404f6d54c3ca30fe252f7e224df99b7c.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/originals/40/4f/6d/404f6d54c3ca30fe252f7e224df99b7c.jpg' /></noscript> Самый эффективный способ сделать это — использовать элемент SVG <code> <defs> </code> для определения ваших значков один раз, а затем ссылаться на них с помощью <code> <использование> </code> элемент. Вы также можете напрямую встроить свои значки SVG, однако, если вы используете один и тот же значок несколько раз на одной и той же странице, вы просто увеличиваете общий вес страницы.</p><blockquote><p> <strong> Примечание: </strong> Если вы создаете одностраничное приложение (SPA), обязательно изучите правильные методы разделения кода, чтобы уменьшить размеры пакетов.</p></blockquote><p> Еще одним преимуществом является то, что вам не нужно поддерживать шрифт и вспомогательные файлы CSS за пределами вашего сайта. Обычная практика для тех, кто использует шрифты значков, состоит в том, чтобы выбирать нужные значки и перестраивать шрифт меньшего размера, который включает только эти значки. Использование значков SVG позволяет вам делать это в вашей кодовой базе без необходимости генерировать ресурсы шрифта во внешних инструментах.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/urbanfonts-files.s3.amazonaws.com/samples/2488/fb3357283d4caaaa5084f376c92269f2.jpg' /><noscript><img loading='lazy' src='/800/600/http/urbanfonts-files.s3.amazonaws.com/samples/2488/fb3357283d4caaaa5084f376c92269f2.jpg' /></noscript></p><h4 tabindex="-1"><span class="ez-toc-section" id="i-22"> Проработанные изображения </span></h4><p> SVG — это прямые векторные изображения. Методы сглаживания, используемые вашим браузером или операционной системой для текста, не влияют на SVG, и ваши значки будут заметно четче.</p><h4 tabindex="-1"><span class="ez-toc-section" id="_CSS-2"> Полное управление CSS </span></h4><p> С SVG у вас есть доступ ко всем тем же элементам управления CSS, что и со шрифтом, и даже больше! Вы можете напрямую нацеливаться на определенные части значка, состоящего из нескольких частей, и применять к каждой из них свой стиль. Вы также можете использовать элементы управления CSS, специфичные для SVG, например штрих <code> 9.0008 собственность.</p><p> Кроме того, SVG просто размер. На них не влияют текстовые правила CSS.</p><h4 tabindex="-1"><span class="ez-toc-section" id="i-23"> Прочие соображения </span></h4><p> Чтобы полностью поддерживать использование SVG на вашем сайте, убедитесь, что вы следуете другим общепринятым рекомендациям:</p><ul><li> <strong> Оптимизируйте свои SVG </strong> — Пропустите изображения SVG через оптимизатор, чтобы уменьшить размер.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/wedal.ru/images/stories/ARTICLES/lessons/iconfonts/3.jpg' /><noscript><img loading='lazy' src='/800/600/http/wedal.ru/images/stories/ARTICLES/lessons/iconfonts/3.jpg' /></noscript> (Большинство, если не все, библиотеки значков, предлагающие пакеты SVG, делают это по умолчанию.)</li><li> <strong> Включить сжатие </strong> — Настройте сервер для отправки всех текстовых ресурсов (HTML, JS, CSS) с помощью Brotli (или GZIP). Это будет включать данные SVG в ваши файлы HTML и/или JS.</li><li> <strong> Эффективное кэширование </strong> — Установите соответствующие заголовки кэширования, чтобы ваши посетители загружали только то, что изменяется. Поскольку ваши SVG будут частью ваших файлов HTML и/или JS, вы захотите, чтобы ваши посетители загрузили их снова, только если они изменятся.</li></ul><h3 tabindex="-1"><span class="ez-toc-section" id="_SVG"> Начало работы со значками SVG </span></h3><p> Большинство основных библиотек значков предлагают пакеты библиотеки SVG. Две популярные библиотеки иконок, Material Design Icons и Font Awesome, имеют пакеты, которые вы можете установить через <code> нпм </code> .</p><p> Если вы используете фреймворк, многие из основных библиотек значков также выпустили пакеты для наиболее популярных, так что вы можете приступить к работе довольно быстро.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.stack.imgur.com/UXnxE.png' /><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/UXnxE.png' /></noscript> Например, если вы используете React, то и Icons Material Design, и Font Awesome имеют простые решения:</p><ul><li><p> <strong> Icons Material Design </strong> — @mdi/react & @mdi/js</p><pre> import Icon from '@mdi/react '; импортировать {mdiCoffee} из '@mdi/js'; const element = <Icon path={mdiCoffee} size={1} />; </pre></li><li><p> <strong> Font Awesome </strong> - @fortawesome/react-fontawesome & @fortawesome/free-solid-svg-icons</p><pre> import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; импортировать {faCoffee} из '@fortawesome/free-solid-svg-icons'; const element = <FontAwesomeIcon icon={faCoffee} />; </pre></li></ul><blockquote><p> <strong> Примечание: </strong> Оба эти решения объединяют только те значки, которые вы используете из-за дрожания дерева.</p></blockquote><h3 tabindex="-1"><span class="ez-toc-section" id="i-24"> Заключение </span></h3><p> Продолжение использования иконочных шрифтов наносит ущерб вашим посетителям и отнимает у вас время. Заменив существующую реализацию шрифта значков на значки SVG, вы помогаете людям, использующим вспомогательные технологии, повышать качество, четкость и надежность ваших значков и сокращать время, затрачиваемое на обслуживание устаревших ресурсов.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/736x/86/e1/3c/86e13c3da39525b5687151c1e60b5c29--number-fonts-playlist.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/736x/86/e1/3c/86e13c3da39525b5687151c1e60b5c29--number-fonts-playlist.jpg' /></noscript> И если вы только что наткнулись на эту статью, пытаясь определить, следует ли вам использовать иконочный шрифт или нет, я надеюсь, что ответ теперь очевиден.</p><h2><span class="ez-toc-section" id="i-25"> Интеграция иконочных шрифтов в ваш веб-сайт </span></h2><p> Как описано в нашей предыдущей статье о иконочных шрифтах, иконочные шрифты — это векторные шрифты, которые содержат функциональные пиктограммы, а не буквы. Веб-разработчики, использующие иконочные шрифты, значительно выигрывают от свободно масштабируемых векторов. В отличие от пиксельных шрифтов, векторные шрифты определяются в графических примитивах, таких как линии, круги, многоугольники и кривые, независимо от устройств вывода. Это позволяет легко преобразовать <strong> без потери данных </strong> на основе CSS; таким образом, соответствующие значки не нужно отдельно загружать и настраивать в графической программе. Вместо этого форматирование выполняется веб-браузером на основе кода. Для этого файл CSS с иконочными шрифтами должен быть включен в заголовок HTML. Отдельные значки впоследствии могут быть интегрированы с помощью HTML-атрибута «класс» на веб-странице.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cdn-icons-png.flaticon.com/512/6422/6422137.png' /><noscript><img loading='lazy' src='/800/600/http/cdn-icons-png.flaticon.com/512/6422/6422137.png' /></noscript> Читайте дальше, чтобы узнать, как это работает с использованием популярного шрифта с открытым исходным кодом <strong> Font Awesome </strong>.</p> Домашняя страница Font Awesome (Источник: http://fontawesome.io)<p> Font Awesome может похвастаться более чем 600 иконками, что делает его одной из самых больших коллекций векторных символов. Пиктографические шрифты доступны бесплатно. Чтобы интегрировать иконочный шрифт в веб-страницу, вам просто нужен их установочный комплект <strong> </strong>. Его можно загрузить с веб-сайта Font Awesome. Вот три шага для интеграции иконочных шрифтов:</p><ol><li> Загрузите установочный комплект</li><li> Включите таблицу стилей в заголовок требуемого документа HTML: чтобы интегрировать Font Awesome в веб-страницу, документ HTML должен быть связан с CSS-файл font-awesome.min.css из установочного комплекта. Для этого в заголовок HTML встраивается следующий код:<link rel="stylesheet" href="https://www.ionos.com/digitalguidepath/to/font-awesome/css/font-awesome.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/svgpng.ru/wp-content/uploads/2020/07/snimok-jekrana-2020-07-20-v-17.59.10-1024x691.png' /><noscript><img loading='lazy' src='/800/600/http/svgpng.ru/wp-content/uploads/2020/07/snimok-jekrana-2020-07-20-v-17.59.10-1024x691.png' /></noscript> min.css. ">Плейсхолдер "путь/к/" представляет собой путь к файлу веб-проекта на сервере.</li><li> Встроить значки: когда соединение с файлом CSS установлено, вы можете использовать пиктограммы шрифта значков в любом месте исходного кода HTML. В следующем примере используется пустой i-элемент в сочетании с атрибутом класса. Классы получены из префикса CSS «fa» и соответствующих имён значков: <i></i></li></ol><p> Код встраивания каждого значка задокументирован на веб-сайте Font Awesome.</p><p> В качестве альтернативы i-элементу вы также можете встроить иконку через семантически пустой тег span.</p> Детальный вид иконки fa-home (Источник: http://fontawesome.io/icon/home/)<ul><li> <time datetime="2022-01-10"> 10.01.22 </time></li><li> Веб-дизайн</li></ul><ul><li> Изображения</li> </code> Реплики2<p>2 <strong> — часть 1: основы</p><ul><li> <time datetime="2019-10-30"> 30.10.2019 </time></li><li> Веб-дизайн</li></ul><p> Эволюция адаптивного веб-дизайна оказала огромное влияние на типографику, и теперь внешний вид текста необходимо настраивать для любого устройства.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/originals/90/fb/f4/90fbf49907e460823e9abedede79f52e.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/originals/90/fb/f4/90fbf49907e460823e9abedede79f52e.jpg' /></noscript> Поэтому адаптивная типографика нуждается в гибких, адаптируемых шрифтах, чтобы обеспечить максимальную читабельность. Узнайте больше в нашем обзоре шрифтов в адаптивном веб-дизайне.</p> Адаптивная типографика – часть 1: основы<p> Иконочные шрифты – веб-дизайн с векторными пиктограммами</p><ul><li> <time datetime="2020-09-14"> 14.09.2020 </time></li><li> Веб-дизайн</li></ul><p> Используйте иконочные шрифты для интеграции векторных пиктограмм на ваш сайт. В отличие от пиксельных изображений, векторная графика имеет то преимущество, что ее можно увеличивать или уменьшать без ущерба для качества. С помощью CSS (каскадных таблиц стилей) веб-дизайнеры также могут интегрировать другие функции дизайна на основе кода. Существует множество различных проектов с открытым исходным кодом, которые могут похвастаться большими значками…</p> Иконочные шрифты – веб-дизайн с векторными пиктограммами<p> Типографика в адаптивном веб-дизайне – часть 3: техническая реализация с помощью CSS Адаптивная типографика — это аспект адаптивного веб-дизайна, которым часто пренебрегают, но на самом деле создать адаптивный дизайн как для заголовков, так и для основного текста на удивление легко.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luc.devroye.org/myfonts-neon/LLWStudio-StudioNeon-2013-10-14.gif' /><noscript><img loading='lazy' src='/800/600/http/luc.devroye.org/myfonts-neon/LLWStudio-StudioNeon-2013-10-14.gif' /></noscript> Так в чем же секрет? Узнайте об этом в третьей части нашей серии, где мы кратко расскажем о реализации адаптивного шрифта и поделимся советами о том, как внедрить команды CSS в свое веб-присутствие.</p> Типографика в адаптивном веб-дизайне — часть 3: техническая реализация с помощью CSS<p> Адаптивная типографика: поиск идеального шрифта С момента появления веб-шрифтов у дизайнеров появилось огромное количество вариантов адаптивной типографики. Их масштабируемость означает, что эти шрифты идеально отображаются на любом устройстве, что делает их идеальным решением для адаптивного дизайна. С тысячами бесплатных веб-шрифтов, доступных на нескольких онлайн-платформах, теперь проще, чем когда-либо, найти идеальный шрифт для вашего веб-сайта….</p> Адаптивная типографика: поиск идеального шрифта<p> Как легко добавить иконочные шрифты WordPress в вашу тему Использование значков WordPress не только украсит ваш сайт, но и облегчит навигацию для читателей. Иконочные шрифты, в частности, предлагают много преимуществ, и существует множество различных пиктограмм, доступных для каждой цели.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/bootstrapious.com/ck_resources/img/image(53).png' /><noscript><img loading='lazy' src='/800/600/http/bootstrapious.com/ck_resources/img/image(53).png' /></noscript> В нашей статье объясняется, что такое шрифты значков, как добавлять значки в WordPress и где их найти.</p> Как легко добавить шрифты значков WordPress в вашу тему<h2><span class="ez-toc-section" id="_SVG_2018"> шрифтов значков против SVG — какой из них следует использовать в 2018 году? </span></h2><p> Автор Коди Арсено</p><p> Опубликовано 9 августа 2018 г.</p><p> Графические значки являются важным компонентом почти каждого веб-сайта или приложения. Хотя значки обычно имеют небольшой размер по своей природе, выбор формата для веб-значков — нетривиальное решение. Помимо стандартных форматов изображений, у веб-разработчиков есть два основных варианта: SVG или иконочные шрифты. Какой из них вы должны использовать? Давайте посмотрим, как эти два формата сравниваются с точки зрения производительности, гибкости и доступности.</p><h3><span class="ez-toc-section" id="i-26"> Эволюция веб-иконок </span></h3><p> Во времена, когда не было CSS, веб-иконки должны были быть изображениями. Поскольку файлы изображений имеют большой размер, веб-разработчики всегда пытались найти альтернативные методы отображения маленьких значков.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/danilin.biz/wp-content/uploads/2017/05/free-font-icons-16-entypo.jpg' /><noscript><img loading='lazy' src='/800/600/http/danilin.biz/wp-content/uploads/2017/05/free-font-icons-16-entypo.jpg' /></noscript> Например, CSS-спрайты позволили разработчикам хранить все свои значки в одном файле изображения, но из-за проблем с доступностью они потеряли популярность с тех пор, как шрифты значков появились на сцене примерно в 2012 году. Однако в последнее время разработчики переходят на использование масштабируемая векторная графика или SVG для своих веб-иконок.</p><h3><span class="ez-toc-section" id="i-27"> Что такое иконочные шрифты? </span></h3><p> Иконочные шрифты — это текстовые файлы, которые можно изменять с помощью CSS. Следовательно, они масштабируются намного лучше, чем растровые изображения, поэтому изменение размера иконочного шрифта не ухудшает его визуальное качество. Изменить цвет или добавить тень так же просто, как и отредактировать текст. Вы можете легко найти бесплатные иконочные шрифты для использования на своем веб-сайте или создать свой собственный. Одним из недостатков использования иконочных шрифтов является то, что большинство наборов шрифтов содержат значки, которые вы, вероятно, не будете использовать, поэтому их будет всего 9.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/danilin.biz/wp-content/uploads/2017/05/free-font-icons-15-raphael.jpg' /><noscript><img loading='lazy' src='/800/600/http/danilin.biz/wp-content/uploads/2017/05/free-font-icons-15-raphael.jpg' /></noscript> 0026 занимает место </strong> .</p><p> Как и CSS-спрайты до них, иконочные шрифты начинают терять популярность у разработчиков. Для правильного отображения шрифтов значков часто требуется, чтобы браузер делал дополнительные запросы к серверу, что может привести к FOIT или миганию невидимого текста на значках, пока библиотеки шрифтов все еще загружаются. Если браузер не может интерпретировать шрифты, пользователь просто увидит пустые символы. Поскольку такие сценарии неприемлемы для профессиональных веб-сайтов, все больше разработчиков обращаются к SVG.</p><h3><span class="ez-toc-section" id="_SVG-2"> Что такое SVG? </span></h3><p> SVG (масштабируемая векторная графика) позволяют отображать векторную графику в браузере. SVG быстро становятся новым стандартом для веб-иконок и анимации. Они не только обеспечивают превосходное масштабирование, но и часто рендерятся быстрее и надежнее, чем иконочные шрифты. Поскольку векторная графика полностью состоит из кода, ее не нужно импортировать из больших внешних файлов. Кроме того, они намного меньше по размеру, чем типичные файлы JPG или PNG, а также большинство библиотек иконочных шрифтов.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/originals/fe/8e/db/fe8edb44247e66d5def7424103450c05.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/originals/fe/8e/db/fe8edb44247e66d5def7424103450c05.jpg' /></noscript></p><p> Чтобы максимально эффективно использовать SVG, может потребоваться некоторое обучение, но вознаграждение того стоит.</p><h3><span class="ez-toc-section" id="_SVG-3"> Как работают SVG </span></h3><p> Можно использовать SVG как в обычном элементе <code> <img> </code> в вашем HTML, используя атрибуты ширины и высоты для настройки размеров. Однако этот метод несколько ограничивает ваши возможности по настройке SVG.</p><p> Если вам нужна возможность дальнейшей настройки значков SVG непосредственно из HTML, вам необходимо встроить SVG, просто вставив код непосредственно в HTML-документ. Затем вы можете изменить цвет или применить фильтры, настроив его с помощью CSS. Вот как выглядит пример иконки SVG:</p><pre> <svg версия = "1.1" базовый профиль = "полный" xmlns="http://www.w3.org/2000/svg"> <rect fill="#3686be" /> <circle cx="150" cy="100" r="80" fill="white" /> <text x="150" y="115" font-size="35" text-anchor="middle" fill="#3a3a3a">KeyCDN</text> </svg> </pre><p> Приведенный выше код, вдохновленный Mozilla, отображает в браузере примерно такую графику:</p><p> Хотя на первый взгляд код SVG может показаться пугающим, разработка значков SVG и управление ими обманчиво просты.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cdn-share-sprites.flaticon.com/pack/0/733/733592-social_3x2.jpg' /><noscript><img loading='lazy' src='/800/600/http/cdn-share-sprites.flaticon.com/pack/0/733/733592-social_3x2.jpg' /></noscript> Фактически, вы можете просто использовать такую программу, как Adobe Illustrator, для создания собственной векторной графики для использования в качестве значков. Просто сохраните их как файлы SVG или сгенерируйте код в интерфейсе Illustrator. Вы также можете экспортировать рисунки из Документов Google в виде файлов SVG.</p><h3><span class="ez-toc-section" id="i-28"> Иконочные шрифты все еще полезны? </span></h3><p> Иконочные шрифты далеко не устарели. Хотя они не всегда являются самым эффективным и надежным вариантом, иконочные шрифты по-прежнему относительно просты и легки в реализации, поэтому многие разработчики продолжают их использовать. В зависимости от количества используемых значков может не стоить переключать шрифты значков для SVG в ваших старых проектах; тем не менее, SVG — это окончательный способ будущего, так что вы можете спокойно использовать их в будущем.</p><h3><span class="ez-toc-section" id="_SVG-4"> Сравнение SVG и шрифтов значков </span></h3><p> Чтобы помочь вам решить, какой формат значков выбрать, давайте посмотрим, как эти два варианта сравниваются в разных отделах.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luc.devroye.org/myfonts-monocase-monoline/NicksFonts-EclecticCrumpanyNF-2014-09-05.gif' /><noscript><img loading='lazy' src='/800/600/http/luc.devroye.org/myfonts-monocase-monoline/NicksFonts-EclecticCrumpanyNF-2014-09-05.gif' /></noscript></p><h4><span class="ez-toc-section" id="1-2"> 1. Размер </span></h4><p> Если вы решите встроить свои SVG для добавления стилей, они могут быстро увеличиться в размере, а код может стать довольно громоздким. Также стоит отметить, что встроенный код SVG не кэшируется браузером пользователя. С другой стороны, внешние файлы SVG можно кэшировать. Если у вас много значков на одной странице, шрифты значков могут обеспечить более плавный пользовательский интерфейс, чем встроенные SVG. Конечно, если вы используете готовый набор шрифтов для значков, вы, вероятно, будете тратить ресурсы на неиспользуемые значки.</p><p> Здесь стоит отметить, что 10 оптимизированных SVG-иконок, вероятно, будут намного меньше, чем вся библиотека иконок. Однако, если вы создадите свою собственную библиотеку значков, содержащую только те значки, которые вам нужны, шрифт библиотеки значков в конечном итоге станет меньше.</p><h4><span class="ez-toc-section" id="2"> 2. Производительность </span></h4><p> Иконочные шрифты можно кэшировать, что ускоряет их загрузку непосредственно из браузера. Однако недостатком этого является то, что они создают дополнительный HTTP-запрос.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.designtrends.com/wp-content/uploads/2016/04/01102247/Product-Icon-Set2.png' /><noscript><img loading='lazy' src='/800/600/http/images.designtrends.com/wp-content/uploads/2016/04/01102247/Product-Icon-Set2.png' /></noscript> С другой стороны, если вы встраиваете значки SVG, дополнительные HTTP-запросы не требуются, однако они не могут кэшироваться браузером.</p><p> Однако вы можете включить файлы SVG во внешний файл, что сделает их кэшируемыми браузером. Опять же, с точки зрения производительности разница в скорости будет зависеть от того, насколько велик ваш шрифт значков/SVG. Попробуйте запустить тесты производительности с обоими, чтобы определить, какой из них загружается быстрее.</p><h4><span class="ez-toc-section" id="3"> 3. Гибкость </span></h4><p> Оба формата могут быть оформлены с помощью CSS, но встроенные SVG предоставляют гораздо больше возможностей, таких как обводка глифов и разноцветные значки. Вы даже можете иметь анимированные веб-иконки.</p><h4><span class="ez-toc-section" id="4"> 4. Поддержка браузеров </span></h4><p> Какой бы формат значков вы ни выбрали, вам может потребоваться выполнить некоторые дополнительные действия, чтобы сделать их совместимыми со старыми браузерами. Поскольку они существуют дольше, иконочные шрифты поддерживаются более широко. Любой, кто использует IE 6 или выше, что, вероятно, включает всех, должен иметь возможность видеть ваши шрифты значков.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.ytimg.com/vi/H8XfMAFYcJo/hqdefault.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.ytimg.com/vi/H8XfMAFYcJo/hqdefault.jpg' /></noscript> Если вы используете SVG, возможно, вы захотите включить полифилл JS для поддержки тех, кто использует IE 8 или более раннюю версию.</p><p> Однако в 2018 году, когда большинство пользователей отказались от устаревших версий браузеров, это не должно вызывать особого беспокойства, независимо от того, выбираете ли вы иконочные шрифты или SVG. Единственное отсутствие поддержки с точки зрения значков SVG и современных браузеров связано с IE и Edge, которые неправильно масштабируют файлы SVG (рекомендуются атрибуты высоты и ширины).</p><h4><span class="ez-toc-section" id="5"> 5. Масштабируемость </span></h4><p> Хотя и SVG, и шрифты значков основаны на векторах, браузеры интерпретируют шрифты значков как текст, что означает, что они подлежат сглаживанию. Поэтому SVG, как правило, выглядят немного четче, чем иконочные шрифты.</p><h4><span class="ez-toc-section" id="6"> 6. Позиционирование </span></h4><p> Поскольку шрифты значков должны быть вставлены через псевдоэлемент, позиционирование значков шрифтов может оказаться сложной задачей. Возможно, вам придется учитывать <code> line-height </code> , <code> vertical-align </code> и <code> letter-spacing </code> среди других факторов, чтобы псевдоэлемент и фактический глиф идеально совпадали.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cdn-icons-png.flaticon.com/512/6422/6422231.png' /><noscript><img loading='lazy' src='/800/600/http/cdn-icons-png.flaticon.com/512/6422/6422231.png' /></noscript> Для SVG вам просто нужно установить размер.</p><h4><span class="ez-toc-section" id="7"> 7. Доступность </span></h4><p> В отличие от иконочных шрифтов, SVG имеют встроенные семантически значимые элементы, поэтому вам не нужно включать какие-либо обходные пути, чтобы сделать ваши шрифты доступными для программ чтения с экрана.</p><h3><span class="ez-toc-section" id="_SVG-5"> Инструменты и ресурсы для значков SVG </span></h3><p> Сеть разработчиков Mozilla предлагает очень подробное руководство по SVG, в котором объясняется, как стилизовать значки с помощью встроенного CSS. В дополнение к Adobe Illustrator существует несколько инструментов, которые помогут вам реализовать значки SVG. IcoMoon — отличный ресурс для готовых SVG и значков шрифтов, а приложение IcoMoon позволяет создавать собственные. Если вы ищете что-то с открытым исходным кодом, Inkscape — это бесплатная программа для векторного рисования, которая экспортирует файлы SVG. Такие инструменты, как Convertio, позволяют преобразовывать другие форматы изображений в файлы SVG.</p><p> Важно отметить, что такие программы, как Illustrator и Inkscape, часто встраивают <strong> в экспортируемые SVG-файлы дополнительную информацию, которая вам не нужна </strong> .<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/media1.thehungryjpeg.com/thumbs2/800_3681361_iglg43jtd30k6uvrhbmhekxhcvsdq0oi10hzezq2_erotica.jpg' /><noscript><img loading='lazy' src='/800/600/http/media1.thehungryjpeg.com/thumbs2/800_3681361_iglg43jtd30k6uvrhbmhekxhcvsdq0oi10hzezq2_erotica.jpg' /></noscript> Таким образом, вы должны обработать свои значки SVG с помощью инструмента оптимизации, такого как SVGO или SVG Minifier, чтобы обрезать их, прежде чем добавлять на свой веб-сайт.</p><p> Помимо ресурсов, упомянутых выше, существует также множество веб-сайтов с иконками, которые предоставляют высококачественные векторы как платные, так и бесплатные услуги. Ознакомьтесь с нашим полным руководством по ресурсам библиотеки значков, а также с нашим постом о повышении скорости ваших глификонов с помощью CDN глификонов.</p><h3><span class="ez-toc-section" id="i-29"> Резюме </span></h3><p> В сообществе все еще ведутся споры о том, лучше ли иконочные шрифты, чем SVG, или наоборот. Правда в том, что то, что делает тот или иной «лучше», в некоторых случаях зависит от обстоятельств, в которых он используется.</p><p> Однако чаще всего <strong> SVG являются предпочтительным методом </strong> . Они гораздо более масштабируемы, предлагают лучший пользовательский интерфейс и поддерживаются всеми основными браузерами. Даже несколько ведущих экспертов по веб-производительности говорят, что в 2018 году крайне важно отказаться от иконочных шрифтов в пользу SVG.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fortress-design.com/wp-content/uploads/CopyPasteCharacter-768x565.png' /><noscript><img loading='lazy' src='/800/600/http/fortress-design.com/wp-content/uploads/CopyPasteCharacter-768x565.png' /></noscript> 0005<p> Дайте нам знать ваши мысли в комментариях ниже. Используете ли вы шрифты значков, значки SVG или их комбинацию?</p><h2><span class="ez-toc-section" id="i-30"> Образец — Библиотека шрифтов значков </span></h2><p> Шрифт значков CaGov включает 361 значок, который вы можете использовать на своем сайте. Четыре различных формата шрифта включены для совместимости со всеми популярными браузерами. Возможно, вам потребуется добавить карту пантомимы на ваш веб-сервер для шрифта WOFF. Чтобы определить, нужен ли он вашему веб-серверу, загрузите файл /fonts/CaGov.woff на свой веб-сервер. Попробуйте загрузить WOFF в свой браузер, посетив: http://yourwebsite.ca.gov/fonts/CaGov.woff. Если вам будет предложено загрузить шрифт, ваш сервер настроен правильно. Если вы получаете 404 или другую ошибку, вам нужно добавить карту пантомимы для расширения «.woff», а тип mime — «application/font-woff». Если вам нужна помощь, обратитесь к администратору сервера.</p><p> CA-GOV-ICON-LOGO</p><p> E600</p><p> CA-GOV-ICON-HOME</p><p> E601</p><p> CA-GOV-ICON-MENU</p><p> E602</p><p> CA-GOV-ICON-APPS</p><p> E603</p><p> CA-GOV-ICON-SEARCH</p><p> E604</p><p> CA-GOV-ICON-Chat</p><p> E605</p><p> CA-GOV-ICON-CAPITOL</p><p> E606</p><p> CA-GOV-ICON-State</p><p> E607</p><p> CA- gov-icon-phone</p><p> e608</p><p> ca-gov-icon-email</p><p> e609</p><p> ca-gov-icon-contact-us</p><p> E66E</p><p> CA-GOV-ICON-CALENDAR</p><p> E60A</p><p> CA-GOV-ICON-BEAR</p><p> E60B</p><p> CA-GOV-ICON-CAL-BEAR</p><p> E90B</p><p> CA-GOV-ICON-BEAR</p><p> E90B</p><p> -Bubble</p><p> E66F</p><p> CA-GOV-ICON-INFO-BUBBLE</p><p> E670</p><p> CA-GOV-ICON-FEEDURES</p><p> E993</p><p> CA-GOV-ICON-ICON</p><p> E992</p><p> CA-gov-ICON</p><p> E992 9000<p> CA-gov-ICON</p><p> E992 9000<p> CA-gov-ICON</p><p> E992 9000<p> CA-gov-ICON</p><p> E992 9000<p> -язык жестов</p><p> e971</p><p> ca-gov-icon-agriculture</p><p> e973</p><p> CA-GOV-ICON-CANNABIS</p><p> E974</p><p> CA-GOV-ICON-ANGRY</p><p> E975</p><p> CA-GOV-ICON-HAPPY</p><p> E976</p><p> CA-GOV-VISA</p><p> E977</p><p> CA-GOV-VISA</p><p> E977 <em><p><p><p><p> CA-GOV-ICON-MASTERCARD</p><p> E978</p><p> CA-GOV-ICON-AMEXCARD</p><p> E979</p><p> CA-GOV-ICON-Discovercard</p><p> E97B</p><p> CA-GOV-PAYPAL</p><p> E97C <em><p> CA-GOV-Paypal</p><p> E97C <em><p> CA-GOV-Paypal</p><p> E97C <em><p> CA-GOV-Paypal</p><p> E97B <em><p> CA-GOV-Paypal gov-icon-apple-pay</p><p> e97a</p><p> ca-gov-icon-chrome</p><p> e97d</p><p> ca-gov-icon-firefox</p><p> e97e</p><p> ca-gov-icon-ie</p><p> e97f</p><p> ca-gov-icon-opera</p><p> e980</p><p> ca-gov-icon-safari</p><p> e981</p><p> CA-GOV-ICON-BELL</p><p> E982</p><p> CA-GOV-ICON-Bookmark</p><p> E983</p><p> CA-GOV-ICON-Book</p><p> E086</p><p> CA-GOV-ICON-Books</p><p> E984</p><p> ca-gov-icon-reader</p><p> e985</p><p> ca-gov-icon-read-book</p><p> e655</p><p> CA-GOV-ICON-PALETTE</p><p> E986</p><p> CA-GOV-ICON-Glass</p><p> E987</p><p> CA-GOV-ICON HEART</p><p> E988</p><p> CA-GOV-ICON DIGNGING</p><p> E989</p><p> ca-gov-icon-gas-pump</p><p> e98a</p><p> ca-gov-icon-idea-alt</p><p> e98b</p><p> ca-gov-icon-medal</p><p> e98c</p> 020d90-s 80d90s ca-gov-icon</p><p> ca-gov-icon-no-smoking</p><p> e98e</p><p> ca-gov-icon-biohazard</p><p> e918</p><p> CA-GOV-ICON-Malware</p><p> E919</p><p> CA-GOV-ICON-Radiation</p><p> E955</p><p> CA-GOV-ICON-CHEMICAL-HAZARD</p><p> E956</p><p> CA-gov-inger</p><p><p></p><p><p> CA-gov-inger</p><p>.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/smlycdn.akamaized.net/data/product2/2/6050acea713308eab55a1111aa978f731fef7de8_l.jpg' /><noscript><img loading='lazy' src='/800/600/http/smlycdn.akamaized.net/data/product2/2/6050acea713308eab55a1111aa978f731fef7de8_l.jpg' /></noscript> e957</p><p> ca-gov-icon-do-not-sign</p><p> e958</p><p> ca-gov-icon-землетрясение</p><p> e959</p><p> ca-gov-icon-quake-hazard</p> 90-govic<p> 905b 905b -quake-house</p><p> e959</p><p> ca-gov-icon-electricity-hazard</p><p> e95c</p><p> ca-gov-icon-flood</p><p> e95d</p><p> ca-gov-icon-hazard</p><p> e95e</p><p> ca-gov-icon-hurricane</p><p> e95f</p><p> e95f</p><p> ca-gov-0ris 2 ca-gov-0rise<h2><span class="ez-toc-section" id="2_ca-gov-0ris_e960">2 ca-gov-0ris e960 </span></h2></p><p> ca-gov-icon-sea-level-rise-alt</p><p> e96e</p><p> ca-gov-icon-severe-weather</p><p> e961</p><p> ca-gov-icon-stop-fire 900 902 025 e 900 -gov-icon-stop-hand</p><p> e963</p><p> ca-gov-icon-tornado</p><p> e964</p><p> ca-gov-icon-tsunami</p><p> E965</p><p> CA-GOV-ICON-TSUNAMI-ALT</p><p> E96F</p><p> CA-GOV-ICON-VOLCANO</p><p> E966</p><p> CA-GOV-ICON-TENT</p><p> E969</p><p></p><p> E96A</p><p> CA-GOV-ICON-DAM</p><p> E96B</p><p> CA-GOV-ICON-HOURS</p><p> E90C</p><p> CA-GOV-ICON-HOURS-Security</p><p> E90D</p><p></p><p> e90e</p><p> ca-gov-icon-brain</p><p> e90f</p><p> ca-gov-icon-certificate</p><p> E910</p><p> CA-GOV-ICON-Certificate-Check</p><p> E911</p><p> CA-GOV-ICON-Зарядка</p><p> E912</p><p> CA-GOV-ICON-CYCLE</p><p> E913</p><p> CA-GOV-ICon.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/s3.amazonaws.com/Keynotopia/Screenshots/FontAwesome/FontAwesome-Text-Icons.0051.jpg' /><noscript><img loading='lazy' src='/800/600/http/s3.amazonaws.com/Keynotopia/Screenshots/FontAwesome/FontAwesome-Text-Icons.0051.jpg' /></noscript> -Пряна</p><p> E914</p><p> CA-GOV-ICON-CITY</p><p> E915</p><p> CA-GOV-ICON-CLOCK</p><p> E916</p><p> CA-GOV-ICON-Cloud-Gear</p><p> E917</p><p> CA-GOV -icon-cloud-services</p><p> e91a</p><p> ca-gov-icon-download-cloud</p><p> e96c</p><p> ca-gov-icon-upload-cloud</p><p> e96d</p><p> ca-gov-icon-cloud-sync</p><p> e91b</p><p> ca-gov-icon-code</p><p> e91c</p></p><p> E91D</p><p> CA-GOV-ICON-EAR-SLASH</p><p> E91E</p><p> CA-GOV-ICON-EYE</p><p> E91F</p><p> CA-GOV-ICON-E-E-SLASH</p><p> E920</p><p> CA-GOV-ICON -file</p><p> e921</p><p> ca-gov-icon-file-audio</p><p> e922</p><p> ca-gov-icon-file-certificate</p><p> E923</p><p> CA-GOV-ICON-FILE-CHECK</p><p> E924</p><p> CA-GOV-ICON-FILE-CODE</p><p> E925</p><p> CA-GOV-ICON-FILE-CSV</p><p> E926</p><p> CA-GOV -icon-file-download</p><p> e927</p><p> ca-gov-icon-file-excel</p><p> e928</p><p> ca-gov-icon-file-export</p><p> e929</p><p><p> ca-gov-icon-0file-02 05 ca-gov-icon-0file-02 e92a</p><p> ca-gov-icon-file-invoice</p><p> e92b</p><p> ca-gov-icon-file-medical</p><p> e92c</p><p> ca-gov-icon-file-medical-alt</p><p> e92d</p><p> ca-gov-icon-file-pdf</p><p> e92e</p><p> ca-gov-icon-file-powerpoint</p> 0ca-gov<p> 9050e92f -icon-file-prescription</p><p> e930</p><p> ca-gov-icon-file-upload</p><p> e931</p><p> ca-gov-icon-file-video</p><p> e932</p><p> ca-gov-icon-05word 052 ca-gov-icon-05word e933</p><p> ca-gov-icon-file-zip</p><p> e934</p><p> ca-gov-icon-filter</p><p> e90a</p><p> ca-gov-icon-filter-solid</p><p> e935</p><p> ca-gov-icon-fingerprint</p><p> e936</p><p> ca-gov-icon-fingerprint-check</p><p> e937 9000ca<p>5<p>onicon e938</p><p> ca-gov-icon-hand-money</p><p> e939</p><p> ca-gov-icon-handshake</p><p> e93a</p><p> ca-gov-icon-institute</p><p> e93b<h2></h2></p><p> e93c</p><p> ca-gov-icon-medical-care</p><p> e93d</p><p> ca-gov-icon-medical-case</p><p> E93E</p><p> CA-GOV-ICON-MEDICEL-CLINIC</p><p> E93F</p><p> CA-GOV-ICON-MEDICAL-CROSS</p><p> E940</p><p> CA-GOV-ICON-MEDICAL-DOCTOR</p><p> E941</p><p> CA-gov-gov</p><p> E941</p><p> CAV-gov-gov-medic -ИКОН-МЕДИЧЕСКАЯ СЕЛКА</p><p> E942</p><p> CA-GOV-ICON-MEDICALE-PALLS</p><p> E943</p><p> CA-GOV-ICON-MOBILE</p><p> E944</p><p> CA-GOV-ICON-PRO-Services</p><p> E945</p><p><p> ca-gov-icon-puzzle</p><p> e946</p><p> ca-gov-icon-puzzle-piece</p><p> e947</p><p> ca-gov-icon-recycle</p><p> e948</p><p> ca-gov-icon-responsive</p><p> e949</p><p> ca-gov-icon-responsive-alt</p><p> e904a</p><p> e904a Сеть</p><p> E94B</p><p> CA-GOV-ICON-Security-SYSTEM</p><p> E94C</p><p> CA-GOV-ICON-SHIELD-CHECK</p><p> E94D</p><p> CA-GOV-ICON-TUMB-UP</p><p> E94E</p><p> CA-gov-icon-up-up</p><p> E94E</p><p> gov-icon-trophy</p><p> e94f</p><p> ca-gov-icon-users</p><p> e950</p><p> ca-gov-icon-users-alt</p><p> e951</p><p> ca-gov-icon-users-dialog</p><p> e952</p><p> ca-gov-icon-users-interaction</p><p> e953<p>-ca-gov-iconvideo</p></p><p> E954</p><p> CA-GOV-ICON-SHARE-BUTTON</p><p> E671</p><p> CA-GOV-ICON-SHARE-EMAIL</p><p> E673</p><p> CA-GOV-ICON-FaceBook</p><p> E616</p><p> CA-GOV-ICON -share-facebook</p><p> e672</p><p> ca-gov-icon-twitter</p><p> e619</p><p> ca-gov-icon-share-twitter</p><p> E675</p><p> CA-GOV-ICON-SNAPCHAT</p><p> E990</p><p> CA-GOV-ICON-SHARE-SNAPCHAT</p><p> E98F</p><p> CA-GOV-ICON-Linkedin</p><p> E617</p><p> CA-GOV-ICON-SHARE</p><p> E617</p><p> CA-GOV-ICON-SHARE</p><p> E617</p><p> CA-GOV-ICON-Share.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cdn-share-sprites.flaticon.com/pack/0/831/831314-apple-logos_3x2.jpg' /><noscript><img loading='lazy' src='/800/600/http/cdn-share-sprites.flaticon.com/pack/0/831/831314-apple-logos_3x2.jpg' /></noscript> -Linkedin</p><p> E676</p><p> CA-GOV-ICON-YOUTUBE</p><p> E618</p><p> CA-GOV-ICON-SHARE-YOUTUBE</p><p> E67B</p><p> CA-GOV-ICON-Pinterest</p><p> E61A</p><p> CA-gov-ICON</p><p> E61A</p><p> -share-pinterest</p><p> e679</p><p> ca-gov-icon-vimeo</p><p> e61b</p><p> ca-gov-icon-share-vimeo</p><p> e67a</p><p> ca-gov-icon-instagram</p><p> e61c</p><p> ca-gov-icon-share-instagram</p><p> e678<p>5<p>5<p> e678<p>5<p> E61D</p><p> CA-GOV-ICON-SHARE-FLICKR</p><p> E674</p><p> CA-GOV-ICON-GOOGLE-PLUS</p><p> E66D</p><p> CA-GOV-ICON-SHARE-GOOGLEPLUS</p><p> E677</p><p> CA-gov- icon-правоприменение</p><p> e60c</p><p> ca-gov-icon-justice-legal</p><p> e60d</p><p> ca-gov-icon-at-sign</p><p> e60e</p><p> ca-gov-icon-attachment</p><p> e60f</p><p> ca-gov-icon-zip-file</p><p> e610 0icon-gov-power<p> 9005 900<p> E611</p><p> CA-GOV-ICON-EXCEL</p><p> E612</p><p> CA-GOV-ICON-WORD</p><p> E613</p><p> CA-GOV-ICON-PDF</p><p> E614</p><p> CA-GOV-ICON-SHARE</p><p> E614</p><p> CA-GOV-ICON-SHARE</p><p> E615</p><p> CA-GOV-ICON-SHARE</p><p> E615</p><p> CA-GOV-ICON-SHAE</p><p> ca-gov-icon-microsoft</p><p> e61e</p><p> ca-gov-icon-apple</p><p> e61f</p><p> CA-GOV-ICON-ANDROID</p><p> E620</p><p> CA-GOV-ICON-COMPUTER</p><p> E621</p><p> CA-GOV-ICON-TABLET</p><p> E622</p><p> CA-GOV-ICON-SMARTPON ca-gov-icon-roadways</p><p> e624</p><p> ca-gov-icon-travel-car</p><p> e625</p><p> ca-gov-icon-travel-air</p><p> e626</p><p> ca-gov-deliver-icon<p> e627</p><p> ca-gov-icon-construction</p><p> e628</p><p> ca-gov-icon-bar-chart</p><p> E629</p><p> CA-GOV-ICON-PIE-CHART</p><p> E62A</p><p> CA-GOV-ICON-GRAPH</p><p> E62B</p><p> CA-GOV-ICON-Server</p><p> E62C</p><p> CA-GOV-ICON ROALD СЛУЧАЕТСЯ</p><p> E62D</p><p> CA-GOV-ICON-Cloud-Download загрузку</p><p> E62E</p><p> CA-GOV-ICON-Cloud-Upload</p><p> E62F</p><p> CA-GOV-ICON-SHIELD</p><p> E630</p><p> CA-GOV-ICON -fire</p><p> e631</p><p> ca-gov-icon-бинокль</p><p> e632</p><p> ca-gov-icon-compass</p><p> E633</p><p> CA-GOV-ICON-SOS</p><p> E634</p><p> CA-GOV-ICON-SHOPPING CART</p><p> E635</p><p> CA-GOV-ICON-VIDEO-CAMERA</p><p> E636</p><p> CA-GOV-ICON -Камера</p><p> E637</p><p> CA-GOV-ICON-GREEN</p><p> E638</p><p> CA-GOV-ICON-LOUD-SPEAKER</p><p> E639</p><p> CA-GOV-ICON-AUDIO</p><p> E63A</p><p> CA-gov-ICon -print</p><p> e63b</p><p> ca-gov-icon-medical</p><p> e63c</p><p> ca-gov-icon-zoom-out</p><p> E63D</p><p> CA-GOV-ICON-Zoom-In</p><p> E63E</p><p> CA-GOV-ICON-IMPONMANS</p><p> E63F</p><p> CA-GOV-ICON-CAT-Bubbles</p><p> E640</p><p> CA-GOV-ICON -call</p><p> E641</p><p> CA-GOV-ICON-PEOPLES</p><p> E642</p><p> CA-GOV-ICON-Person</p><p> E643</p><p> CA-GOV-ICON-ID-ID</p><p> E644</p><p> CA-GOV-ICON-ID</p><p> E644</p><p> -платежная карта</p><p> e645</p><p> ca-gov-icon-skip-backwards</p><p> e646</p><p> ca-gov-icon-play</p><p> E647</p><p> CA-GOV-ICON-PAUSE</p><p> E648</p><p> CA-GOV-ICON-SKIP-FORWARD</p><p> E649</p><p> CA-GOV-ICON-MAIL</p><p> E64A</p><p> CA-GOV-ICON-MAGE</p><p> E64B</p><p> CA-GOV-ICON-HOUSE</p><p> E64C</p><p> CA-GOV-ICON-GEAR</p><p> E64D</p><p> CA-GOV-ICON-TOOL</p><p> E64E</p><p> CA-GOV-ICON-TIME</p><p>.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/736x/8c/44/98/8c4498c53255cdb2f064009fcb60d67f.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/736x/8c/44/98/8c4498c53255cdb2f064009fcb60d67f.jpg' /></noscript> e64f</p><p> ca-gov-icon-cal</p><p> e650</p><p> ca-gov-icon-check-list</p><p> E651</p><p> CA-GOV-ICON-DOCUMENT</p><p> E652</p><p> CA-GOV-ICON-CLIPBOARD</p><p> E653</p><p> CA-GOV-ICON-PAGE</p><p> E654</p><p> CA-GOV-CC-COPYRIGE</p><p></p><p> CA-GOV-CC-COPYRIGE<p><p> E656</p><p> CA-GOV-ICON-CA-CAPITOL</p><p> E657</p><p> CA-GOV-ICON-CA-State</p><p> E658</p><p> CA-GOV-ICON-Forwite</p><p> E659 <em><p> rss</p><p> e65a</p><p> ca-gov-icon-road-pin</p><p> e65b</p><p> ca-gov-icon-online-services</p><p> E65C</p><p> CA-GOV-ICON-LINK</p><p> E65D</p><p> CA-GOV-ICON-MAGNIFY-GLASS</p><p> E65E</p><p> CA-GOV-ICON-LOK</p><p> E660</p><p> CA-GOV-ICON-INFO</p><p> E661</p><p> CA-GOV-ICON-ERROW-UP-UP</p><p> E04B</p><p> CA-GOV-ICON-DOWN</p><p> E04C</p><p> CA-GOV-ICON -стрелка-влево</p><p> e04d</p><p> ca-gov-icon-стрелка-вправо</p><p> e04e</p><p> ca-gov-icon-carousel-prev</p><p> E666</p><p> CA-GOV-ICON-CAROUSEL-NEXT</p><p> E667</p><p> CA-GOV-ICON-ERROW-PREV</p><p> E668</p><p> CA-GOV-ICON-ERRW-NEXT</p><p> E669</p><p> CA-GOV-grow-next</p><p> E669 <em><p> CA-GOV-GOV-grow-next</p><p> E669 <em><p> CA-GOV-GOV-next</p><p> E669 <em><p> CAV-GOV-ECON-NEXT</p><p> E669 <em><p> -icon-menu-toggle-closed</p><p> e66a</p><p> ca-gov-icon-menu-toggle-open</p><p> e66b</p><p> ca-gov-icon-carousel-play</p><p> e907</p><p> ca-gov-icon -pause</p><p> e66c</p><p> ca-gov-icon-search-right</p><p> 55</p><p> ca-gov-icon-выпускник</p><p> E903</p><p> CA-GOV-ICON-BRIEFCASE</p><p> E901</p><p> CA-GOV-ICON-IMEARES</p><p> E904</p><p> CA-GOV-ICON-GEARS</p><p> E900</p><p> CA-GOV-ICON-TOOLS</p><p><p></p><p> CA-GOV-ICON-TOOLS 9000<p><p></p><p> CA-GOV-ICON-TOOLS 9000<p><p>.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/danilin.biz/wp-content/uploads/2017/05/free-font-icons-14-socialico.jpg' /><noscript><img loading='lazy' src='/800/600/http/danilin.biz/wp-content/uploads/2017/05/free-font-icons-14-socialico.jpg' /></noscript> E035</p><p> CA-GOV-ICON-PENCILL</p><p> 6A</p><p> CA-GOV-ICON-PENCILE-EDIT</p><p> 6C</p><p> CA-GOV-ICON-SCEANC e024</p><p> ca-gov-icon-table</p><p> e025</p><p> ca-gov-icon-flowchart</p><p> E0DF</p><p> CA-GOV-ICON BUILDING</p><p> E0FD</p><p> CA-GOV-ICON-Searching</p><p> E0F7</p><p> CA-GOV-ICON-WALLET</p><p> E0D8</p><p> CA-GOV-ICON-D-WALLET <em><p><p></p><p> CA-GOV-ICON-TAGS <em><p><p></p><p><p> E07C</p><p> CA-GOV-ICON-Currence</p><p> E0F3</p><p> CA-GOV-ICON-IDEA</p><p> E902</p><p> CA-GOV-ICON-Lightbulb</p><p> E072</p><p> CA-GOV-CALCUTULE</p><p> E072</p><p> CA-GOV-CALCULATUT<p> ca-gov-icon-drive</p><p> e0e5</p><p> ca-gov-icon-globe</p><p> E0E3</p><p> CA-GOV-ICON-HOURGLASS</p><p> E0E1</p><p> CA-GOV-ICON-MIC</p><p> E07F</p><p> CA-GOV-ICON-VOLUME</p><p> E069</p><p> CA-GOV-ICON-MUSIC <em><p> E069</p><p> CA-GOV-ICON-MUSIC <em><p><p></p><p> CA-GOV-ICON <em> e08e</p><p> ca-gov-icon-folder</p><p> e05c</p><p> ca-gov-icon-grid</p><p> e08c</p><p> ca-gov-icon-archive</p><p> e088</p><p> ca-gov-icon-contacts</p><p> e087</p><p> ca-gov-icon-drawer</p><p> e084</p><p> ca-gov-icon-map</p><p> e083</p><p> ca-gov-icon-pushpin</p><p> e082</p><p> ca-gov-icon-location</p><p> e081</p><p> ca-gov-icon-quote-fill</p><h2><span class="ez-toc-section" id="2_e05a">2 e05a Заполните </span></h2></p><p> E064</p><p> CA-GOV-ICON-Warning-Triangle</p><p> E063</p><p> CA-GOV-ICON-Warning-Circle</p><p> E967</p><p> CA-GOV-ICON-WARNIN gov-icon-warning-fill</p><p> e062</p><p> ca-gov-icon-check-fill</p><p> e052</p><p> ca-gov-icon-close-fill</p><p> e051</p><p> ca-gov-icon-plus-fill</p><p> e050</p><p> ca-gov-icon-minus-fill</p><p> e04f<p></p></p> вставка-заполнение-вправо</p><p> e046</p><p> ca-gov-icon-caret-fill-left</p><p> e045</p><p> ca-gov-icon-caret-fill-down</p><p> e044</p><p> ca-gov-icon-caret заполнение</p><p> e043</p><p> ca-gov-icon-caret-fill-two-right</p><p> e04a</p><p> ca-gov-icon-caret-fill-two-left</p><p> e049</p><p> ca-gov-icon-caret-fill-two-down</p><p> e048</p><p> ca-gov-icon-caret-fill-two-up</p><p> e047</p><p> ca-gov-icon-arrow-fill -right</p><p> e03c</p><p> ca-gov-icon-arrow-fill-left</p><p> e03b</p><p> ca-gov-icon-arrow-fill-down</p><p> e03a</p><p> ca-gov-icon-arrow-fill-up</p><p> e039</p><p> ca-gov-icon-arrow-fill-left-down</p><p> e040</p><p> ca-gov-icon-arrow-fill-right-down</p><p> e03f</p><p> ca-gov-icon-arrow-fill-right-up</p><p> e03e</p><p> ca-gov-icon-arrow-fill-left-up</p><p> e03d</p><p> ca-gov-icon-triangle-line-right</p><p> 49</p><p> ca-gov-icon-triangle-line-left</p><p> 48</p><p> ca-gov-icon-triangle-line-up</p><p> 46</p><p> ca-gov-icon-triangle-line-down<p> 4 900</p><p> ca-gov-icon-caret-line-two-right</p><p> 41</p><p> ca-gov-icon-caret-line-two-left</p><p> 40</p><p> ca-gov-icon-caret-line-two- вниз</p><p> 3f</p><p> ca-gov-icon-caret-line-two-up</p><p> 3e</p><p> ca-gov-icon-caret-line-right</p><p> 3d</p><p> ca-gov-icon-caret-line-left</p><p> 3c</p><p> ca-gov-icon-caret-line-up</p><p> 3a</p><p> ca-gov-icon-caret-line-down</p><p> 3b</p><p> ca-gov-icon-important-line 5 0<p>0<h2></h2><p> ca-gov-icon-info-line</p><p> e905</p><p> ca-gov-icon-check-line</p><p> 52</p><p> ca-gov-icon-question-line</p><p> e908</p><p> ca-gov-icon-close-line</p><p> 51</p><p> ca-gov-icon-plus-line</p><p> 50</p><p> ca-gov-icon-minus-line 2 ca-gov-00</p><p> -Кон-квор</p><p> E909</p><p> CA-GOV-ICON-MINUS-MARK</p><p> 4B</p><p> CA-GOV-ICON-PLUS-MARK</p><p> 4C</p><p> CA-GOV-ICON-Collapse</p><p> 58</p><p> CA -gov-icon-expand</p><p> 59</p><p> ca-gov-icon-check-mark</p><p> 4e</p><p> ca-gov-icon-close-mark</p><p> 4d</p><p> ca-gov-icon-triangle-right</p><p> 45</p><p> ca-gov-icon-triangle-left</p><p> 44</p><p> ca-gov-icon-triangle-down 0 0 0 0 9 0 9 9 0 0 0 2 4 9 0 0 0 -icon-triangle-up</p><p> 42</p><p> ca-gov-icon-caret-two-right</p><p> 39</p><p> ca-gov-icon-caret-two-left</p><p> 38</p><p> ca-gov-careticon -two-down</p><p> 37</p><p> ca-gov-icon-caret-two-up</p><p> 36</p><p> ca-gov-icon-caret-right</p><p> 35</p><p> ca-gov-icon-caret-left</p><p> 34</p><p> ca-gov-icon-caret-up</p><p> 32</p><p> ca-gov-icon-caret-down</p><h2><span class="ez-toc-section" id="53_33_Icon-Expand-All"> 53 33 Icon-Expand-All </span></h2></p><p> E991</p><p> CA-GOV-ICON-COLLAPSE-ALL</p><p> E970</p><p> CA-GOV-ICON-DRAG</p><p> E972</p><p> CA-GOV-ICON-UPDATE</p><p> E994</p><p> TO SANER значок на вашу страницу, вставьте пустой тег span с именем класса для значка, который вы хотите использовать, например:</p><p> Когда значки используются с заголовками от h2 до H5 и некоторыми предварительно настроенными модулями, включаются стили для размера шрифта и цвета.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/blog.bthemez.com/wp-content/uploads/2018/02/STYLISH-FONT-STYLE-FREE-DOWNLOAD-uppercase.jpg' /><noscript><img loading='lazy' src='/800/600/http/blog.bthemez.com/wp-content/uploads/2018/02/STYLISH-FONT-STYLE-FREE-DOWNLOAD-uppercase.jpg' /></noscript> При использовании где-либо еще вам нужно будет добавить стили для размера шрифта и цвета самостоятельно. Иконочные шрифты могут быть оформлены с использованием тех же правил css, которые используются для оформления любого другого текста на странице. Например, <code> color: </code> и <code> font-size: </code> измените цвет и размер значка.</p><h2><span class="ez-toc-section" id="_WordPress_Awesome"> Добавление шрифтов значков в WordPress с помощью улучшенного шрифта Awesome </span></h2> Логотип WPMU DEV<p data-readability-styled="true"> г. Добавление шрифтов значков в WordPress с помощью Better Font Awesome</p><p data-readability-styled="true"> Хасан Ахтар Хасан Ахтар – 7 апреля 2022 г.</p><p> 10 Комментарии</p><p> Людей естественным образом привлекают визуальные аспекты веб-сайта WordPress в той же мере, в какой их привлекает письменный контент, которым вы делитесь. На самом деле, по словам интернет-маркетолога Джеффа Булласа, статьи с изображениями набирают на 94% больше просмотров, чем статьи без изображений.</p><p> Если вы спросите меня, это огромный прирост просмотров страниц.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i0.wp.com/www.psdly.com/wp-content/uploads/2020/05/Bellisa-Script-Font.jpg' /><noscript><img loading='lazy' src='/800/600/http/i0.wp.com/www.psdly.com/wp-content/uploads/2020/05/Bellisa-Script-Font.jpg' /></noscript></p><p> А для чего именно?</p><p> Просто добавьте в свой контент несколько высококачественных изображений, соответствующих статье.</p><p> А как насчет изображений на вашем веб-сайте, которые выходят за рамки скриншотов и стоковых фотографий? Как насчет изображений, которые не только привлекают внимание, но и выполняют полезную функцию?</p><p> Да, я про иконки. Вы знаете, те крошечные маленькие изображения, которые разбросаны по веб-сайтам с целью обмена в социальных сетях, связи с владельцами бизнеса и загрузки информации, и это лишь некоторые из них.</p><p> Поскольку идея о том, что посетители сайта не только привлекаются к значкам изображений на веб-сайтах, но и склонны к взаимодействию с ними, зародилась, люди повсюду начали добавлять их на свои веб-сайты.</p><p> Тем не менее, по мере развития технологий, как это всегда бывает, традиционные значки-изображения начали давать сбои в качестве графического решения для веб-сайтов. Это связано с тем, что они добавляют слишком много веса файлам, требуют слишком много HTTP-запросов, плохо масштабируются и, что хуже всего, не подходят для мобильных устройств.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/danilin.biz/wp-content/uploads/2017/05/free-font-icons-8-sosa.jpg' /><noscript><img loading='lazy' src='/800/600/http/danilin.biz/wp-content/uploads/2017/05/free-font-icons-8-sosa.jpg' /></noscript></p><p> Но есть решение: иконочные шрифты.</p><p> Сегодня я собираюсь обсудить, что такое иконочные шрифты и какие преимущества дает их использование на вашем веб-сайте WordPress. Итак, приступим.</p><p> Продолжите чтение или перейдите по этим ссылкам:</p><ul><li> Что такое шрифты-значки и зачем их использовать?</li><li> Параметры значка шрифта</li></ul><h3><span class="ez-toc-section" id="i-31"> Что такое иконочные шрифты и зачем их использовать? </span></h3><p> Иконочные шрифты — это именно то, на что они похожи — шрифты, полностью состоящие из значков. На самом деле, иконочные шрифты можно описать как шрифты, которые отображают только символы или символы, исключая буквы и цифры, которые присутствуют в традиционных текстовых шрифтах.</p> Иконочные шрифты — это изображения, которые часто побуждают к действию, но на самом деле они не являются изображениями. Шрифты<p> Icons используются для отображения часто используемых символов на вашем веб-сайте. Например, кнопки социальных сетей, ваша корзина покупок, кнопки загрузки и кнопки навигации — все это примеры значков, которые отображаются на вашем веб-сайте в виде крошечных интерактивных изображений.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/736x/c6/e8/e2/c6e8e21123930de7ea947415705b8863--stencil-fonts.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/736x/c6/e8/e2/c6e8e21123930de7ea947415705b8863--stencil-fonts.jpg' /></noscript> Иконочные шрифты</p> могут использоваться для представления самых разных идей.<h4><span class="ez-toc-section" id="i-32"> Зачем использовать шрифты значков? </span></h4><p> Значки изображений в прошлом хорошо работали для многих владельцев веб-сайтов. Однако по мере развития правил навигации, удобства использования и дизайна в мире Интернета иконочные шрифты стали лучшим решением для отображения интерактивных изображений на веб-сайте.</p><p> Вот несколько веских причин, по которым шрифты-иконки являются лучшим выбором:</p><ul><li> Легко масштабировать без потери качества</li><li> Настраивается с точки зрения цвета и тени</li><li> 100% отклик</li><li> Работает как спрайты изображений CSS, но может стилизоваться как текст</li><li> Простота использования</li><li> Прозрачная выбивная опора</li><li> Кроссбраузерность</li><li> Настройка непрозрачности, поворота и т. д.</li><li> Меньшие размеры файлов</li><li> Не жертвуйте скоростью или производительностью вашего сайта</li></ul><p> Как видите, есть несколько причин, по которым вы можете захотеть использовать на своем веб-сайте иконочный шрифт, а не изображение.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/danilin.biz/wp-content/uploads/2017/05/free-font-icons-12-icomoon.jpg' /><noscript><img loading='lazy' src='/800/600/http/danilin.biz/wp-content/uploads/2017/05/free-font-icons-12-icomoon.jpg' /></noscript></p><h3><span class="ez-toc-section" id="i-33"> Варианты значков шрифтов </span></h3><p> Для начала давайте рассмотрим некоторые из лучших мест, где можно найти как бесплатные, так и премиальные наборы шрифтов значков. С помощью этих ресурсов вы можете создавать пользовательские значки шрифтов, использовать эксклюзивные и уникальные изображения значков и даже получать доступ к инструментам, которые помогут вам импортировать значки непосредственно на ваш веб-сайт.</p><ul><li> <strong> Фонтелло </strong> <strong> . </strong> Преобразуйте бесплатные пользовательские векторные изображения в веб-шрифты для использования на вашем веб-сайте, чтобы они были четкими, масштабируемыми и совместимыми с разными браузерами. Кроме того, настройте с помощью CSS, чтобы изменить цвета, размеры, тени и многое другое.</li><li> <strong> Икомун </strong> <strong> . </strong> Этот онлайн-сервис позволяет создавать четкие шрифты для значков с точностью до пикселя. Кроме того, вы можете использовать эксклюзивный конструктор иконочных шрифтов, чтобы преобразовать значки изображений в иконочные шрифты.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/script-tutorials.com/demos/379/sosa.png' /><noscript><img loading='lazy' src='/800/600/http/script-tutorials.com/demos/379/sosa.png' /></noscript> С 5000 бесплатными значками с открытым исходным кодом и более 4000 премиальных значков, помещенных в специальные пакеты значков, здесь нет недостатка в изображениях, которые можно выбрать.</li></ul><p> Далее давайте рассмотрим плагин шрифта, который можно использовать на вашем веб-сайте WordPress.</p><h4><span class="ez-toc-section" id="WP_SVG_Icons"> WP SVG Icons </span></h4><p> WP SVG Icons — это плагин значков WordPress, который содержит более 490 включенных значков. Кроме того, вы можете создавать и загружать до 10 ваших собственных значков с помощью эксклюзивного импортера шрифтов Icomoon Icon Pack.</p><p> С помощью этого плагина вы можете легко вставлять значки в свои сообщения, страницы и боковые панели без написания единой строки кода, используя новейшую функцию шорткода.</p><h3><span class="ez-toc-section" id="i-34"> Заключительные мысли </span></h3><p> Использование иконочных шрифтов на вашем веб-сайте WordPress не только добавляет красивые изображения без ущерба для скорости или производительности, но и повышает уровень функциональности вашего сайта, что способствует более активному взаимодействию с пользователем.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/originals/84/31/c7/8431c7029393798ce1706adf8a6bde7d.png' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/originals/84/31/c7/8431c7029393798ce1706adf8a6bde7d.png' /></noscript></p><p> Иконочные шрифты легко масштабировать, настраивать и, что самое главное, они обеспечивают посетителям вашего сайта, независимо от того, откуда они обращаются к вашему сайту, максимальное удобство просмотра.</p><p> Использование подключаемого решения, такого как WP SVG Icons, — один из самых простых способов добавления шрифтов значков на ваш веб-сайт. Это связано с тем, что с плагином шрифта практически не требуется настройка, и он обычно делает большую часть работы за вас, поэтому вам не нужно иметь дело с обширным HTML-кодом.</p><p> Если вы хотите увеличить количество просмотров страниц своего веб-сайта, улучшить взаимодействие с контентом и предоставить посетителям веб-сайта привлекательный веб-сайт, который четко сообщает о том, что вы от них хотите, рассмотрите возможность добавления шрифтов-значков на свой веб-сайт с помощью Better Font Awesome или любого из другие варианты, которыми я поделился с вами.</p><p data-readability-styled="true"> Метки:</p><ul><li> шрифты</li></ul><p data-readability-styled="true"> Поделитесь этой статьей</p><h6><span class="ez-toc-section" id="_WP"> Получайте свежие обновления WP прямо на свой почтовый ящик.</span></h6><img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/736x/16/eb/e5/16ebe5a9e47a29ed422371b17816d3ea.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/736x/16/eb/e5/16ebe5a9e47a29ed422371b17816d3ea.jpg' /></noscript></h6> Введите ваш адрес электронной почты…<p> Нажимая подписаться, я даю согласие на получение новостей WPny! P.S. Мы сохраняем вашу электронную почту на 100% конфиденциальной и не спамим 🙂</p><h2><span class="ez-toc-section" id="33"> 33 Лучшие коллекции бесплатных иконочных шрифтов </span></h2><p> С бумом смартфонов и планшетов веб-сайты в конечном итоге должны были быть адаптивными, чтобы они по-прежнему выглядели эстетично на небольших экранах. Иконочные шрифты очень помогают веб-дизайнерам и разработчикам приложений, поскольку они автоматически масштабируются с дисплеем Retina.</p><p> Неудивительно, почему иконочные шрифты очень популярны, поскольку они предлагают преимущества, которые необходимы современным веб-сайтам, включая легкие файлы для быстрой загрузки, дисплей Retina и простоту настройки.</p><p> В этом обзоре <strong> бесплатных иконочных шрифтов </strong> представлено более 2000 иконок, которые дизайнеры и разработчики могут загрузить и добавить в свой дизайнерский арсенал. Приходи, смотри и выбирай.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/736x/ce/4e/7c/ce4e7c8a42b5675e3a7b5495f4335037.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/736x/ce/4e/7c/ce4e7c8a42b5675e3a7b5495f4335037.jpg' /></noscript></p><h5><span class="ez-toc-section" id="100"> 100 бесплатных иконок </span></h5><p> Этот первый набор бесплатных иконок шрифтов представлен в различных форматах, включая SVG, PNG, PSD, EPS, AI и веб-шрифты. <br/></p><h5><span class="ez-toc-section" id="i-35"> Смайлик </span></h5><p> Этот набор содержит 59 значков шрифтов в форматах EOT, SVG, TTF и WOFF. <br/></p><h5><span class="ez-toc-section" id="Robicons"> Robicons </span></h5><p> Здесь у вас есть значки с линиями, которые масштабируются, готовы к стилю CSS, готовы к отображению сетчатки и хорошо спроектированы. <br/></p><h5><span class="ez-toc-section" id="Flat_Line_Icons_Webfont"> Flat Line Icons Webfont </span></h5><p> Этот пакет содержит 50 бесплатных иконок в форматах WOFF, SVG, TTF и EOT. Они также поставляются в форматах AI и EPS, что позволяет масштабировать их до любого размера. <br/></p><h5><span class="ez-toc-section" id="IonIcons"> IonIcons </span></h5><p> Ionicons — это большой набор из 733 иконок, различающихся по дизайну и размеру. <br/></p><h5><span class="ez-toc-section" id="MFG_Labs"> MFG Labs </span></h5><p> Эти значки легко встраиваются в веб-сайт или приложение с помощью веб-шрифта и CSS. <br/></p><h5><span class="ez-toc-section" id="Font_Awesome"> Font Awesome </span></h5><p> Набор значков шрифтов поставляется с форматами EOT, SVG, TTF, WOFF, WOFF2 и OTF.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/odwebdesign.net/uploads/titles/d/fd/b8/how-to-turn-your-icons-into-a-web-font_ors.jpg' /><noscript><img loading='lazy' src='/800/600/http/odwebdesign.net/uploads/titles/d/fd/b8/how-to-turn-your-icons-into-a-web-font_ors.jpg' /></noscript> Он включает в себя 675 иконок, которые масштабируются и могут быть стилизованы с помощью CSS. <br/></p><h5><span class="ez-toc-section" id="i-36"> Лигатурные символы </span></h5><p> В этом наборе более 200 иконок, включая различные символы и логотипы. <br/></p><h5><span class="ez-toc-section" id="Rivolicons"> Rivolicons </span></h5><p> Rivolicons предлагает 132 иконки в форматах SVG, PDF и веб-шрифты. <br/></p><h5><span class="ez-toc-section" id="Dripicons"> Dripicons </span></h5><p> Этот набор содержит 200 векторных значков линий. <br/></p><h5><span class="ez-toc-section" id="_Elegant_Icon"> Шрифт Elegant Icon </span></h5><p> Эти значки основаны на векторах, что позволяет масштабировать тему без потери качества. <br/></p><h5><span class="ez-toc-section" id="_PW_Drawin_Icons"> Шрифт PW Drawin Icons </span></h5><p> Эти значки можно бесплатно использовать в любых личных и коммерческих проектах. <br/></p><h5><span class="ez-toc-section" id="Linecons"> Linecons </span></h5><p> Набор содержит 48 полностью масштабируемых векторных иконок со стилями контура. <br/></p><h5><span class="ez-toc-section" id="Tonicons"> Tonicons </span></h5><p> Вот бесплатный набор из 300 контурных иконок, которые отлично подходят для веб-дизайнеров и приложений. Они бывают в форматах EPS, SVG, AI и PNG. <br/></p><h5><span class="ez-toc-section" id="Free_Line_Icon_Pack"> Free Line Icon Pack </span></h5><p> Этот набор значков можно бесплатно загрузить и использовать для личного и коммерческого дизайна.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/736x/2d/08/78/2d0878f5a8754726be21aa22d0a040d0.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/736x/2d/08/78/2d0878f5a8754726be21aa22d0a040d0.jpg' /></noscript> Они включают форматы PSD, AI, SVG и веб-шрифтов. <br/></p><h5><span class="ez-toc-section" id="Typicons"> Typicons </span></h5><p> Typicons — это бесплатные векторные значки, встроенные в веб-шрифт для удобного использования в ваших пользовательских интерфейсах, будь то в Интернете или в собственном приложении. <br/></p><h5><span class="ez-toc-section" id="150"> 150 контурных значков </span></h5><p> Этот набор в настоящее время содержит 150 значков, доступных для загрузки и используемых в форматах SVG, AI и PSD. <br/></p><h5><span class="ez-toc-section" id="Feather"> Feather </span></h5><p> Набор чистых и современных иконок упакован в формате PSD, CSH, SVG и Webfont. <br/></p><h5><span class="ez-toc-section" id="_7"> Ход 7 </span></h5><p> Это полный набор из 202 значков с тонкими штрихами, вдохновленных iOS 7. <br/></p><h5><span class="ez-toc-section" id="Icalicons"> Icalicons </span></h5><p> Icalicons поставляется с 84 значками шрифтов в форматах SVG, EOT, TTF, WOFF, WOFF2. <br/></p><h5><span class="ez-toc-section" id="i-37"> Мини-иконки </span></h5><p> Следующий набор включает 80-пиксельные идеальные мини-иконки в формате PSD и Icon Font. <br/></p><h5><span class="ez-toc-section" id="i-38"> Иконки погоды </span></h5><p> Это большой набор шрифтов с погодными иконками. Его можно стилизовать с помощью CSS и масштабировать до любых размеров.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/736x/bc/e2/bf/bce2bf5c51eb6b05d4eb14f8dfa65443--your-design-app-design.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/736x/bc/e2/bf/bce2bf5c51eb6b05d4eb14f8dfa65443--your-design-app-design.jpg' /></noscript> <br/></p><h5><span class="ez-toc-section" id="Icon_Font_Pack"> Icon Font Pack </span></h5><p> Эти значки с поддержкой Retina имеют очень современный стиль, который прекрасно дополнит любой проект. <br/></p><h5><span class="ez-toc-section" id="Dashicons"> Dashicons </span></h5><p> Dashicons содержит 239 иконок в форматах EOT, SVG, TTF и WOFF. <br/></p><h5><span class="ez-toc-section" id="Linea"> Linea </span></h5><p> Linea имеет более 700 значков, которые можно загрузить в формате SVG, PNG и других значков шрифтов. <br/></p><h5><span class="ez-toc-section" id="Octicons"> Octicons </span></h5><p> Octicons содержит набор из более чем 170 иконок, которые можно скачать бесплатно. <br/></p><h5><span class="ez-toc-section" id="i-39"> Значки обводки </span></h5><p> Следующий набор содержит 80 красивых иконок в форматах PSD, AI и веб-шрифтов. <br/></p><h5><span class="ez-toc-section" id="Mono_Social"> Mono Social </span></h5><p> Этот набор из 101 значка шрифта можно использовать в личных и коммерческих проектах. Он также поставляется с 3 различными границами. <br/></p><h5><span class="ez-toc-section" id="77_Essential_Icons"> 77 Essential Icons </span></h5><p> Вот набор минимальных контурных значков, которые можно использовать в различных форматах, включая AI, EPS, PNG, PDF, PSD, SVG и другие значки шрифтов. <br/></p><h5><span class="ez-toc-section" id="Socialicious"> Socialicious </span></h5><p> Socialicious предлагает в общей сложности 74 значка с фоновыми и нефоновыми версиями.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/typecache.com/image_news/2903_1.jpg' /><noscript><img loading='lazy' src='/800/600/http/typecache.com/image_news/2903_1.jpg' /></noscript> <br/></p><h5><span class="ez-toc-section" id="100_IOS"> 100 бесплатных значков IOS </span></h5><p> Этот набор современных и хорошо продуманных значков поставляется с вариантами форматов, включая AI, EPS, PDF, PNG, SKETCH и SVG как для заполненных, так и для контурных версий. <br/></p><h5><span class="ez-toc-section" id="_Metro"> Иконки в стиле Metro </span></h5><p> Metrize Icons — это набор бесплатных иконок, которые идеально подходят для приложений или веб-дизайна. Он также доступен как для коммерческих, так и для личных проектов. <br/></p><h5><span class="ez-toc-section" id="_V3"> Иконки V.3 </span></h5><p> Вот набор иконок с мягким дизайном и форматами AI, SVG, TTF и WOFF на выбор. <br/></p><h5><span class="ez-toc-section" id="i-40"> Примечание: </span></h5><p> Авторские права на весь вышеуказанный визуальный контент принадлежат его уважаемому владельцу. Пожалуйста, ознакомьтесь с Условиями использования этих ресурсов перед использованием, чтобы предотвратить нежелательные события. NaldzGraphics не берет на себя ответственность за любые изображения/видео, представленные на этом сайте, если не указано иное.</p><h5><span class="ez-toc-section" id="i-41"> Есть что-то, связанное с веб-дизайном, фрилансом и другими замечательными вещами? Дайте нам знать, и, возможно, мы представим его в нашем следующем посте.</span></h5> <img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/media1.thehungryjpeg.com/thumbs2/800_3736860_a3tbks2n9ipmo6pya0gc7e22eoe70pmp2l9klcoo_no-rules-font.jpg' /><noscript><img loading='lazy' src='/800/600/http/media1.thehungryjpeg.com/thumbs2/800_3736860_a3tbks2n9ipmo6pya0gc7e22eoe70pmp2l9klcoo_no-rules-font.jpg' /></noscript></div><div class="post-meta"></div></article><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://xn--80aahvkuapc1be.xn--p1ai/sajt/css-shablon-sajta-vizitki-stranica-ne-najdena-ichigarev.html" rel="prev"><span class="meta-nav">Предыдущая запись</span> Css шаблон сайта визитки: Страница не найдена ⋆ ICHIGAREV</a></div><div class="nav-next"><a href="https://xn--80aahvkuapc1be.xn--p1ai/raznoe/plavnyj-hover-css-plavnaya-transformaciya-css-svojstvo-transition-primery-2.html" rel="next"><span class="meta-nav">Следующая запись</span> Плавный hover css: Плавная трансформация | CSS свойство transition — Примеры</a></div></div></nav><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/ikonochnye-shrifty-font-awesome-ikonochnyj-shrift-i-css-instrumentarij.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--80aahvkuapc1be.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='20015' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div></div><div class="col-md-4"><div id="sidebar" class="sidebar"><div id="search-9" class="widget widget_search"><form role="search" method="get" class="form-search" action="https://xn--80aahvkuapc1be.xn--p1ai/"><div class="input-group"> <label class="screen-reader-text" for="s">Поиск:</label> <input type="text" class="form-control search-query" placeholder="Поиск и помощь" value="" name="s" title="Поиск:" /> <span class="input-group-btn"> <button type="submit" class="btn btn-default" name="submit" id="searchsubmit" value="Найти"><i class="fa fa-search"></i></button> </span></div></form></div><div id="categories-10" class="widget widget_categories"><div class="widget-title"><span>Рубрики</span></div><ul><li class="cat-item cat-item-8"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/seo">Seo</a></li><li class="cat-item cat-item-4"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/wordpress">Wordpress</a></li><li class="cat-item cat-item-6"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/dizajn">Дизайн</a></li><li class="cat-item cat-item-7"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/zarabotok">Заработок</a></li><li class="cat-item cat-item-9"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/plagin">Плагин</a></li><li class="cat-item cat-item-3"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/raznoe">Разное</a></li><li class="cat-item cat-item-15"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/rekomendac">Рекомендац</a></li><li class="cat-item cat-item-5"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sajt">Сайт</a></li><li class="cat-item cat-item-1"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sovety">Совет</a></li><li class="cat-item cat-item-12"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sovet">Советы</a></li><li class="cat-item cat-item-13"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/tem-2">Тем</a></li><li class="cat-item cat-item-10"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/tem">Темы</a></li><li class="cat-item cat-item-14"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/urok-2">Урок</a></li><li class="cat-item cat-item-11"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/urok">Уроки</a></li></ul></div></div></div></div></div></div><footer class="mz-footer" id="footer"><div class="container footer-inner"><div class="row row-gutter"></div></div><div class="footer-wide"></div><div class="footer-bottom"><div class="site-info"> © Орфографика.рф, 2010 - 2019</div> Расшифровки, размещенные на сайте, предназначены только для личного, некоммерческого использования.<br> При перепосте материалов обязательна активная ссылка: «Текст подготовлен компанией Орфографика.рф». <br>Вопросы и предложения: info@орфографика.рф.</div></footer></div><p id="back-top"> <a href="#top"><i class="fa fa-angle-up"></i></a></p> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --> <script defer src="https://xn--80aahvkuapc1be.xn--p1ai/wp-content/cache/autoptimize/js/autoptimize_13058247d3082f39f5d009ed1b806645.js"></script></body></html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="665dc1f63526196ea5971cdd-|49" defer></script>