Приветствую, коллеги! Сегодня нам стоит поговорить о такой замечательной штуке, под именем Font Awesome, а именно о том как работать с ним в фотошопе. Ведь мы – армия дизингеров и должны помогать друг-другу. Ну еще и качественно делать свою работу… ну вы поняли.
Для понимания Font Awesome — это иконочный шрифт, который можно использовать с практически любыми элементами веб-страниц(и не только) для повышения наглядности и улучшения дизайна в целом. Все мы знаем что иконочки мы считываем быстрей, чем текст, поэтому владение такими инструментами сделают жизнь как нам, так и пользователям проще. Этот замечательный шрифт разработал человечек с именем Дэйв Ганди, собрав коллекцию иконок, которые удовлетворят даже самые необычные потребности в таких символах.
Когда вы собираете макет какого-нибудь сайтика, помните, что после того как вы его передадите в производство, его нужно будет кому-то сверстать. И этот человек, увидев ваши «жопеги» схватится за голову и будет проклянать вас до конца сдачи проекта(с его стороны).
Чтобы избежать недоразумений и наличия вашей куклы-вуду у кого-то в офисе, да и просто показать свой профессионализм, рекомендую вам установить этот замечательный пакет. Да и чтобы вы не били меня палками за то, что я попусту расхваливаю эту штуку, давайте посмотрим на преимущества и недостатки:
Преимущества Font Awesome
1. Каждая из иконок является векторной и может быть изменена до любого размера без потери качества.
2. Иконка является текстовым символом, а значит вы можете применить к ней любое стилевое свойство, доступное для шрифтов. Это может быть цвет, фон, тень и так далее.
3. Иконки прекрасно функционируют и отображаются во всех браузерах, даже в старом IE8 (удивительно да?)
4. Хорошо сочетаются с кучей фреймворков, например Bootstrap
5. Это не только шрифт, но еще и стилевой файл, в котором обозначены несколько типовых решений, например размеры иконок, поворот, выравнивание. Достаточно подключить стиль и назначить класс для элемента.
6. Можно накладывать иконки друг на друга, анимировать, сочетать меж собой. Всё это расширяет возможности.
7. Вкусный пункт! Шрифт свободен для коммерческого использования. Никто к вам с повесткой не придёт.
Недостатки Font Awesome
1. Символы могут иметь только один цвет, однако, это можно обойти использовав объединение иконок или при помощи эффектов CSS.
2. Библиотека слишком избыточна, собственно, как и большинство других. Если вам нужна лишь дюжина иконок, то придётся подключить несколько сотен.
Как мы видим, недостатков совсем не много и они не критичны, поэтому перейдём к установке шрифта в систему, потому что речь идет о локальной работе в фотошопе. Рассмотрим установку для Windows. Первым делом переходим по ссылке – http://fontawesome.io и тыкаем «Download»
На втором экране выбираем «Free for Desktop» и сохраняем архив в любое удобное место.
Открываем архив и находим файлы шрифтов с расширением «.otf». В моём случае случае они располагаются по пути: /fontawesome-free-5.9.0-desktop/otfs. Извлекаем их в любую папку, после чего выделяем все и нажатием правой кнопки мыши устанавливаем в систему. Все остальные файлы в архиве используются для CSS и препроцессоров – грубо говоря, все это для верстки сайта.
Congratulation! Font Awesome успешно установлен!
Теперь пару слов о том как это дело использовать. Для вставки нужной иконки нам понадобится шпаргалка. Найти ее можно по сыллке https://fontawesome.com/cheatsheet?from=io или https://fontawesome.ru/cheatsheet/ Лично мне вторая нравится больше, она более компактная. Выбираем оттуда любую понравившуюся иконку, и просто выделяем её, после чего копируем, как обычный текст. В открытом макете, создаем текстовое поле и вставляем иконку аналогичным способом. Если иконка будет выглядеть как пречеркнутый квадратик, то пугаться и бросать дизайн не стоит. Нужно лишь выделить весь текст и выбрать в меню шрифтов FontAwesome.
И на последок, не забывайте, что теперь шрифт доступен в любой программе, использующей шрифты. Например в ворде :)
Комментарии