Font Awesome
Font Awesome предлагает вам масштабируемые векторные иконки, которые вы можете с легкостью персонализировать — размер, цвет, тени и все, что можно сделать силами CSS.
Один шрифт, 675 иконок
Единой коллекцией Font Awesome является графическим языком интернет-пространства.
Нет необходимости в JavaScript
Мало проблем с совместимостью, так как для Font Awesome не требуется JavaScript.
Бесконечная масштабируемость
Масштабируемая векторная графика обозначает, что иконки будут выглядеть великолепно в любом размере.
Бесплатно, как воздух
Font Awesome полностью бесплатен для коммерческого использования. Читай про лицензию.
Управление через CSS
Легко настроить цвет иконок, размер, тени и все остальное, что возможно с помощью CSS.
Поддержка Retina-дисплеев
Иконки Font Awesome векторные, а это значит, что они великолепны на экранах высокого разрешения.
Совместимость с фреймворками
Изначально сделанный для Bootstrap, Font Awesome прекрасно работает и с другими фреймворками.
Совместимость с настольными компьютерами
Возможность использовать Font Awesome в любой программе как обычный шрифт, шпаргалка под весь набор иконок.
Доступность
Font Awesome любит экранные читалки и помогает сделать доступными ваши иконки в интернете.
Благодарности
Спасибо @robmadole и @supercodepoet за обзор дизайна иконок, советы, помощь по Jekyll, а также спасибо всем окружающим гавнюкам.
ОГРОМНОЕ спасибо @gtagliala за проделанную фантастическую работу над репозиторием Font Awesome в GitHub.
Спасибо MaxCDN за обеспечение превосходной доступности BootstrapCDN, самый быстрый и простой способ начать работать с Font Awesome.
Как создать набор иконок в формате шрифта
Разработка персонального иконочного шрифта для сайта является одной из основных задач веб-разработчика. Т.к. использование готовых наборов шрифтов, может сильно «утяжелить» загрузку страниц сайта. Это связано с тем, что они содержат большое количество иконок (Font Awesome — 675 иконок, IconMoon — 491, Foundation Icons — 283, Glyphicons Halflings – более 250). В то время как количество иконок, которых реально требуется для оформления среднего сайта, находится в диапазоне от 20 до 50 единиц.
Преимущества и недостатки иконочных шрифтов
Иконочный шрифт представляет собой обыкновенный шрифт, в котором вместо традиционных символов используются значки (иконки).
Использование иконок в таком формате является очень привлекательным решением. Во-первых, такими иконками очень просто управлять, т.е. изменять их размер, цвет и другие параметры. Осуществляется это с помощью таких же свойств CSS, которые применяются для стилизации обычного текста ( font-size , color и др.). Во-вторых, в формате шрифта иконки находятся в векторном формате. Это означает то, что они хорошо масштабируются и отлично выглядят на экранах устройств с высокой плотностью пикселей. Кроме этого шрифт — это сжатый формат, а значит, для его загрузки может потребоваться гораздо меньше времени, чем для загрузки аналогичных векторных изображений. Ещё одним неоспоримым плюсом шрифтовых иконок является то, что они поддерживаются всеми браузерами. Осуществляется это благодаря созданию на базе одного пакета иконок шрифтов в различных форматах: eot , ttf , svg и woff . Это необходимо выполнить для того, что браузер использовал тот формат шрифта, который он «понимает». Потому что на текущий момент нет ни одного формата шрифта, который бы поддерживался всеми браузерами.
Кроме достоинств у шрифтовых иконок есть конечно и недостатки. Первый связан с тем, что они немного теряют четкость отрисовки при очень маленьких размерах из-за сглаживания. Второй недостаток заключается в том, что с помощью них нельзя реализовать сложную цветную графику. Если у вас к иконкам имеются такие требования, то в качестве их формата лучше использовать svg.
Основный алгоритм действий по созданию шрифта в IcoMoon App
Рассмотрим некоторые основные шаги по разработке шрифта в сервисе IcoMoon App:
- Перейти на страницу IcoMoon App, с помощью кнопки, расположенной на главной странице сервиса или используя URL адрес: https://icomoon.io/app/.
- Ввести название проекта (значок «Manage Projects»).
- Добавить в проект при необходимости шрифт Font Awesome (кнопка с тремя полосочками -> Icon Library).
- Добавить в проект пустой набор, который можно использовать для помещения в него пользовательских (своих) иконок (кнопка с 3 линиями -> New Empty Set).
- Задать название только что созданному набору (кнопка с тремя полосочками -> View / Edit Info).
- Добавить в набор пользовательские (свои) значки (кнопка «3 горизонтальные линии» -> Import to Set).
- Выбрать иконки, которые необходимо добавить в результирующий набор, с помощью инструмента «Select».
- Выполнить генерацию шрифта (нажать внизу страницы на элемент «Generate Font»).
- Нажать на значок шестерёнки и в открывшемся диалоговом окне ввести название шрифта (Font Name), префикс класса (Class Prefix), выбрать опцию «Use a class» (Использовать класс) и указать в поле значение «.icon».
- Нажать на кнопку «Download».
Подключение иконок в формате шрифта к странице
Для установки иконочного шрифта необходимо распаковать архив, созданный сайтом IcoMoon, и перенести из него в рабочий проект каталог fonts (шрифты) и файл «style.css».
По умолчанию папка со шрифтами должна располагаться в том же каталоге что и файл CSS. Для того чтобы каталог fonts расположить по-другому, необходимо внести соответствующие изменения в файл «style.css».
Подключения шрифта к странице и классов для удобной работы с ним осуществляется посредством файла «style.css».
При желании содержимое файла «style.css» можно включить в свой файл стилей. Это позволит сократить количество HTTP-запросов и немного увеличить загрузку страницы.
Использование иконок на странице
Применение иконок созданного шрифта на странице осуществляется с помощью элемента i , к которому необходимо добавить базовый класс icon (определяется на основе настройки «Use a class») и класс иконки.
Создание иконок социальных сетей для сайта
Разработку собственных социальных значков для сайта очень просто выполнить в открытом векторном SVG редакторе Inkscape.
Для этого их можно нарисовать или воспользоваться уже существующими изображениями иконок из бесплатных наборов.
Если вы в качестве исходников будете использовать растровые изображения значков, то их предварительно следует векторизовать.
После подготовки векторных svg-изображений их можно с помощью сервиса IcoMoon собрать в иконочный шрифт.
Пример иконок социальных сетей в форме прямоугольника со скруглёнными краями.
Скачать шрифт с социальными иконками и исходные коды можно по следующей ссылке: https://yadi.sk/d/oaOfUROSyTjDQ.
Использование социальных иконок на странице (классы социальных значков можно посмотреть в файле «style.css»):
Кроме IcoMoon есть ещё и другие онлайн сервисы для создания значков в виде шрифта. К ним относится «fontello.com», «fontastic.me», «glyphter.com», «pictonic.co» и др.
Как подключить и использовать иконки Font Awesome 5
Доброго времени суток, читатели моего блога! Мне постоянно поступает масса вопросов по шрифту Font Awesome – «Как подключить Font Awesome?», «Как его использовать на сайте или в Photoshop?», «Почему отображаются вместо иконок квадратики?» и тому подобные. И я решил сделать подробное руководство по Font Awesome 5, в котором вы найдете ответы на все эти вопросы.
Содержание статьи: скрыть
- 1. Как подключить Font Awesome
- 1.1. Подключение с помощью CDN
- 1.2. Подключение Font Awesome 5 с хранением файлов на своем хостинге (CSS)
- 2.1. Как использовать Font Awesome в HTML
- 2.2. Как использовать Font Awesome в псевдоэлементах after и before CSS. Параметр content.
- 2.3. Как использовать шрифт Font Awesome в Photoshop
Как подключить Font Awesome
В этой главе мы подробно разберемся как подключить Font Awesome 5 всеми возможными способами. И какой из них лучше выбрать.
Подключение с помощью CDN
Чтобы подключить иконочный шрифт Font Awesome 5 с помощью CDN необходимо перейти на страницу: Font Awesome Start и выставить необходимые параметры. Полученный код вставляем в тег вашего сайта, на тех страницах где вы собираетесь использовать иконки.
На скриншоте №1 изображены настройки, которые я использую.
- Выбираем версию, которая нам нужна. Free — бесплатная версия. Pro — платная и имеет дополнительные стили и наборы иконок.
- Начертание шрифта, которое мы будем использовать в своем проекте.
- Что мы будем использовать. Webfont — иконочный шрифт. SVG — иконки в формате .svg
- Сгенерированный код для подключения Font Awesome с помощью CDN.
Чтобы не переходить на сайт, я размещу код со стандартными настройками здесь.
Подключить Font Awesome с помощью CDN очень просто. Ведь вам нужно разместить всего лишь одну строчку кода в свой проект и все будет работать. Файлы будут храниться на сервере разработчиков. Но я предпочитаю хранить все на своем хостинге, так как я точно могу быть уверен, что все будет работать корректно и никакие изменения и обновления со стороны разработчика шрифта не затронут мой проект.
Подключение Font Awesome 5 с хранением файлов на своем хостинге (CSS)
Для начала нужно скачать файлы Font Awesome и разместить их на свой хостинг. Для этого переходим по этой ссылке https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself или скачиваем по прямой ссылке.
После скачивания получаем архив с файлами, как на скриншоте №2:
Для работы иконочного шрифта необходимы только папки выделенные красным. И то в паке /CSS нам нужен только один файл css/all.min.css (Смотрите скриншот №3)
Файл all.min.css хранит все стили шрифта Font Awesome, я использую именно этот файл. На это есть много причин связанные с моим личным удобством. Вы же можете использовать тот файл, стили которого вы будете использовать. Например, если вы хотите использовать только бесплатный иконочный шрифт, достаточно подключить файл fontawesome.min.css.
.min в названии файла показывает, что файл сжат, то есть убраны лишние пробелы и переносы. Это увеличивает скорость обработки этого файла, но если вы собираетесь его редактировать, что я вам делать не рекомендую, то удобней использовать файл без .min
Переносим папку webfont и файл all.min.css на свой хостинг.
Очень важно! Папка webfont нужно располагать на директорию выше чем файл all.min.css, иначе шрифт Font Awesome не подключится, так как в стилях прописан именно такой путь для файлов со шрифтами. Если такой способ противоречит структуре вашего проекта, тогда просто пропишите в файле all.min.css новый путь до папки webfont.
У меня это выглядит так:
В папке fontawesome хранится один файл all.min.css
Теперь нам нужно подключить Font Awesome к своему сайту, для этого подключаем стили all.min.css, так как вы обычно подключаете файлы со стилями. Этот процесс я описывать не буду, так как он имеет огромное количество вариантов и каждый делает это по-своему. Но если вы новичок и не знаете, как подключать файлы со стилями, то Google вам в помощь. При возникновении трудностей пишите в комментариях, и я обязательно вам помогу.
Как использовать Font Awesome
В этой части статьи мы разберем как правильно использовать Font Awesome в веб-разработке или дизайне на примере Photoshop.
Как использовать Font Awesome в HTML
Это самый простой способ использования иконочного шрифта. Достаточно выбрать из каталога иконок Font Awesome нужную иконку и вставить ее код в нужное место вашего html документа. На скриншоте № 5 под цифрой 1 изображено место откуда можно узнать код иконки.
Как использовать Font Awesome в псевдоэлементах after и before CSS. Параметр content.
Чтобы использовать иконочный шрифт для его отображение в псевдоэлементах after или before, нужно использовать Unicode иконки. Который можно взять на странице с нужной иконкой (на скриншоте №5 цифра 2)
Теперь пишем стили css для элемента before или after:
div::after
Разберем главные моменты в коде.
3. В свойстве content указываем Unicode.
4. Обязательно задаем семейства шрифта. Обратите внимание у Font Awesome 5 используется 2 шрифта «Font Awesome 5 Brands» и «Font Awesome 5 Free». В избежании ошибки указывайте оба.
5. Font-weight — обязательно нужно указывать 900, иначе иконки будут отображаться в виде квадратиков. Другая толщина доступна только в PRO версии.
Как использовать шрифт Font Awesome в Photoshop
Для того, чтобы использовать иконочный шрифт в фотошопе необходимо установить шрифт на свой компьютер. Они находятся в папке webfont в архиве Font Awesome. Для установки нужно кликнуть правой кнопкой мыши на нужный шрифт и нажать «Установить».
Смотрите на скриншоте №6:
После установки можно использовать Font Awesome в фотошопе, для этого мы копируем необходимую нам иконку с каталога (цифра 3 на скриншоте №5) и вставляем в photoshop как текст. Незабываем выбрать в настройках семейство шрифта Font Awesome.
Стилизация иконок FontAwesome
Для стилизации иконок используются стандартные стили CSS для шрифтов. Например, чтобы поменять цвет иконки нужно использовать свойство CSS color, а поменять размер иконок Font Awesome нужно использовать свойство font-size.
Вот и вся информация, которая необходима для использования иконок от Font Awesome, как для разработки сайтов, так и для проектирования дизайн-макетов в Photoshop. Надеюсь статья вам понравилась и решила все ваши проблемы. А если нет, посмотрите мое видео на эту тему, там я показываю все на примере.
Если информация оказалась полезной поделитесь ей с друзьями в социальных сетях, а так же подписывайтесь на обновление блога и youtube канал, чтобы не пропустить полезные материалы.
MagentaWAVE
Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.
12 февраля 2016
Подключение и использование иконочных шрифтов
Чтобы просто и быстро добавить масштабируемые картинки к различным элементам сайта, без использования спрайт-изображений, можно применить иконочный шрифт, в котором собраны все необходимые иконки в одном стиле. В подавляющем большинстве случаев, символы добавленные таким образом, правильно отображаются в браузере интернет-пользователя и остаются четкими при увеличении и уменьшении масштаба веб-страницы. И хотя сами изображения элементов обладают довольно простым, но сегодня очень модным дизайном, их оформление, например цвет и фон, можно изменить без труда.
Сервисов предоставляющих бесплатные, готовые сборки шрифтовых картинок достаточно, при этом разнообразие иконок в них может удовлетворить практически любые потребности при создании сайта или оформлении блога. В данной заметке речь пойдет о том, как подключить иконочный шрифт и использовать его при оформлении сайта.Два наиболее популярных ресурса это Font Awesome и Fontello, первое(и главное) — они бесплатны; второе — Font Awesome — предоставляет публичную ссылку для прямой загрузки шрифта со своего хостинга, то есть не нужно использовать свой или искать сторонний хостинг для размещения необходимых файлов, в Fontello можно собрать свой собственный шрифт, загружая на сайт иконки в .svg формате, или выбрать из общего набора именно те, которые нужны в данном случаи, а не загружать всё что есть.
Как подключить иконочный шрифт к сайту
Способов подключения на данный момент существует три:
1. Если доступна, использовать общую(публичную) прямую ссылку на хостинг сервиса, которую нужно разместить внутри раздела , лучше повыше или перед закрывающим , это уже как пойдет.
Для Font Awesome последняя версия ссылки выглядит так:2. Скачать архив со всеми необходимыми файлами, извлечь содержимое папок CSS и Fonts, разместить извлеченные файлы на хостинге своего сайта в соответствующие папки и указать на них ссылки в секции . вашего сайта следующим образом —
— дать путь только к папке:
— удаленно подключить файлы с CSS из соответствующей папки:
3. После загрузки архива с фалами, извлечь только содержимое папки Fonts и подключить иконочный шрифт, используя правило CSS @font-face:
@font-face <
font-family: ‘fontello’;
src: url(‘..путь-к-файлу/fontello.eot‘);
src: url(‘..путь-к-файлу/fontello.woff‘) format(‘woff’),
url(‘..путь-к-файлу/fontello.ttf‘) format(‘truetype’),
url(‘..путь-к-файлу/fontello.svg#fontello‘) format(‘svg’);
font-weight: normal;
font-style: normal;
>
Как использовать иконочный шрифт на сайте
У каждого выбранного символа есть название и код, посмотреть их можно как на странице официального сайта, так и на демо странице из загруженного архива. Название, по совместимости, является так же и добавочным классом элемента, для которого нужна иконка, код используется как UTF-символ иконки. Способы добавления символов на страницу зависят от варианта подключения шрифта.
Если воспользоваться вторым вариантом — подключить шрифт используя CSS-файлы, возможно добавление знаков как с помощью класса, так и кода:
1. Создать пустой элемент с классом иконки и добавить его перед нужным блоком:
2. Добавить класс с названием символа к нужному элементу:
3. Добавить в CSS псевдоэлемент для элемента с иконкой, который будет содержать UTF-код желаемого символа и указывать на используемый шрифт (в данном примере — Fontello):
ul li a::before <
content: ‘\e80a‘;
font-family: «fontello»;
font-style: normal;
font-weight: normal;
>
Если для подключения шрифта иконок использовать третий вариант — только файлы шрифтов, то для того, чтобы можно было добавлять иконки по средствам присвоения соответствующего класса-названия, в CSS нужно внести дополнительную конструкцию устанавливающую подключенный шрифт для этих элементов и для каждого указать относящийся к нему символ:
[class^=»icon-«]::before,
[class*=» icon-«]::before font-family: «fontello»;
font-style: normal;
font-weight: normal;
>
.icon-doc-inv::before content: ‘\e801‘;
>
.icon-mail-alt::before content: ‘\e805‘;
>но можно обойтись и без нее, запись вида:
— будет работать все равно.