Как использовать Font Awesome в Illustrator и других приложениях
Маркетинговые инструментыМаркетинг в социальных медиа
Douglas KarrСледуйте на Twitter Вторник, Октября 26, 2021
0 10,852 Прочитано 2 минут
Моему сыну нужен был визитная карточка за его диджейский бизнес и производство музыки (да, он почти получил докторскую степень по математике). Чтобы сэкономить место при отображении всех его социальных каналов на его визитной карточке, мы хотели предоставить чистый список с использованием значков для каждой службы. Вместо того, чтобы покупать каждый логотип или коллекцию на сайте стоковых фотографий, мы использовали Являются удивительными.
Пожалуйста, включите JavaScript
Как найти и использовать Font Awesome в Illustrator | Martech Zone
Font Awesome предоставляет масштабируемые векторные иконки, которые можно мгновенно настраивать — размер, цвет, тень и все, что можно сделать с помощью CSS.
Шрифты являются векторными и масштабируются для вашего проекта, поэтому они идеально подходят для использования в графических настольных приложениях, таких как иллюстратор или фотошоп. Вы даже можете преобразовать их в контуры и использовать в иллюстрациях.
Font Awesome широко используется для добавления этих логотипов и других значков на веб-сайты, но вы можете не осознавать, что можете загрузить фактический шрифт для установки на свой Mac или ПК! Шрифт TrueType (файл ttf) является частью скачать. Установите шрифт, перезапустите Illustrator, и все готово!
Нет необходимости запоминать каждый символ или искать нужный, вот как использовать шрифт:
- Откройте Шпаргалка по Font Awesome В Вашем браузере.
- Откройте Adobe Creative Cloud программа (например, иллюстратор).
- Установите шрифт на Являются удивительными.
- Копировать и вставлять персонажа из шпаргалки в ваш файл.
Вот и все!
Как использовать Font Awesome в Illustrator
Вот короткое видео о том, как я нахожу значки в Font Awesome, а затем использую их в своих иллюстратор файлы.
Как использовать Font Awesome в Photoshop, Illustrator и других платформах для настольных ПК.
Вот отличный видеообзор о том, как использовать Font Awesome с иллюстратор (или другие настольные платформы).
Объявления
Создание контуров для вашего шрифта Классный шрифт
Следует иметь в виду, что не следует использовать его на платформе, которая не встраивает шрифт и требует его установки в системе.
Например, использование его в Word потребует от получателя, чтобы шрифт был загружен в его систему, чтобы его увидеть. В Illustrator или Photoshop вы можете использовать «Создать контуры» для преобразования шрифта в векторное изображение.
- In иллюстратор, вы можете использовать Create Outlines для преобразования шрифта в векторное изображение. Для этого используйте инструмент «Выделение» и выберите «Текст»> Создать контуры. Вы также можете использовать команду клавиатуры Ctrl + Shift + O (Windows) или Command + Shift + O (Mac).
- In Photoshop, щелкните правой кнопкой мыши текстовый слой. Наведите указатель мыши на фактический текст в текстовом слое (не на значок [T]) и щелкните правой кнопкой мыши. В контекстном меню выберите Преобразовать в форму.
Скачать Font Awesome
Раскрытие информации: Martech Zone является аффилированным лицом Adobe Creative Cloud, иллюстратор, и Мычание и разместите нашу партнерскую ссылку выше.
сообщить об этом объявлении
Статьи по теме
Поэтому проверить
Закрыть
Как ИИ может улучшить отношения между клиентом и брендом
Пятница, Май 5, 2023
Построитель строки запроса UTM кампании Google Analytics
Четверг, Май 4, 2023
Cognito Forms: безопасный сбор данных, прием платежей и создание рабочих процессов для автоматизации вашего бизнеса
Вторник, Май 2, 2023
Иконочные шрифты, альтернативы FontAwesome
Веб-разработкаЧто такое «Иконочный шрифт» — это обычный шрифт, но вместо букв и цифр в нем отображаются различные пиктограммы и символы. В последние годы такие шрифты активно используют в веб-дизайне, в качестве иконок для сайта.
С их помощью можно улучшить юзабилити сайта, упростить восприятие информации. Еще из плюсов использования иконочных шрифтов по сравнению с иконками-картинками:
- Возможность масштабирования без потери качества
- Беспроблемная поддержка в большинстве браузеров
- Возможность стилизации, работа как с обычным текстом
- Небольшой вес
- Всего за один запрос на сервер загружаются все необходимые иконки
Кроме использования для сайтов, такие шрифты можно установить и в свою ОС и использовать в программах, например в Фотошопе.
Самый популярный иконочный шрифт FontAwesome https://fontawesome.com/, но поскольку информации о нем и так полно, мы лучше рассмотрим альтернативные шрифты.
Этот шрифт в качестве иконок содержит логотипы различных интернет и ИТ брендов.
Шрифт поставляется с CSS, поэтому у вас есть возможность его кастомизации. Иконки шрифта можно использовать без фона или с фоном сделав из квадратными, с закругленными концами и просто круглыми.
Вы можете использовать цветные иконки, которые повторяют реальные цвета бренда.
Лицензия: SIL Open Font and MIT
Twemoji — это open source проект смайликов от Twitter. Канадский дизайнер Elle Kasai создала на его основе иконочный штифт Twemoji Awesome.
Все имена классов для отображения иконок такие же, как в шпаргалке по Twemoji (https://www.webfx.com/tools/emoji-cheat-sheet/), но вам нужно использовать тире (-) вместо подчеркивания (_), вот и все.
Лицензия: MIT and CC-BY for the Emoticon graphics
Octicons — это иконочный шрифт от GitHub. Он позволит использовать в вашем проекте те же иконки, что и на GitHub. Доступно более 170 иконок.
Лицензия: MIT
Этот шрифт включает в себя 250 иконок в 5 различных размерах и 14 цветах.
Лицензия: Attribution-ShareAlike 4.
0 International
DevIcons — это иконочный шрифт разработанный Теодором Ворильясом. Он содержит 85 символов и логотипов знакомых приложений для разработки, таких как GitHub, Laravel, Django, Visual Studio и многих других.
Лицензия: MIT
В этом шрифте содержится множество иконок, вдохновленных дизайном Google Material и сгруппированных в 15 различных категорий. Чтобы использовать их, нужно просто подключить файл шрифта Material-Design-Iconic-Font.ttf к сайту, а потом используя эту шпаргалку добавить иконки на сайт. Так же можно изменять размеры, цвета и вообще работать с ними как с обычным шрифтом с помощью CSS.
Лицензия: Attribution-ShareAlike 4.0 International
Как Использовать Font Awesome в Photoshop Designs | by Jehoshaphat Abu
Как использовать Font Awesome в Photoshop Designs | Иосафат Абу | Medium2 минуты чтения
·
8 декабря 2016 г.
Всякий раз, когда мне поручают новый проект, первое, что я делаю, выслушав рассказ моего клиента, — делаю наброски на бумаге. После того, как это будет сделано, я запускаю Photoshop и делаю что-то визуальное, прежде чем написать одну строку кода.
До того, как я узнал, что могу использовать шрифт awesome в Photoshop, я использовал старомодную технику для создания значков, заключавшуюся в том, чтобы просто обрезать изображения, чтобы они работали как значки и обеспечивали одинаковое качество изображения для всех размеров.
Font Awesome — популярный значок шрифта, используемый разработчиками, и это более сложная альтернатива.
Вы можете использовать Font Awesome на любом веб-сайте, загрузив шрифт и файлы CSS, но вы также можете интегрировать его в свои дизайны Photoshop. В этой статье я покажу вам, как это сделать.
- Перейдите на страницу Font Awesome и нажмите кнопку «Загрузить».
- Распаковать файл.
- Найдите эту папку: /font-awesome-4.
7.0/fonts/ - Скопируйте файл FontAwesome.otf в папку со шрифтами. Расположение этой папки зависит от вашей операционной системы. В Windows 8.1 папка находится в: C:\Windows\Fonts\
7.0/fonts/ - Откройте браузер и перейдите на страницу значков.
- Из списка доступных значков выберите один >> щелкните правой кнопкой мыши >> Копировать.
Откройте Photoshop и создайте новый файл, выбрав «Файл» >> «Создать» >> «ОК».
- Выберите инструмент «Текст»
- Нажмите на рабочую область >> щелкните правой кнопкой мыши >> Вставить.
- Выберите текст (который на данный момент представляет собой просто квадрат с диагональными линиями).
- Перейдите к «панели управления» Photoshop и выберите Font Awesome, чтобы получить значок.
Поздравляем! Теперь вы знаете, как использовать значки Font Awesome в дизайне Photoshop
Font Awesome
Photoshop
How To
Design
Автор Jehoshaphat Abu
205 Последователи
Эрудит, сторонник STEAM-образования.
Я пишу о музыке | Компьютеры | Дизайн и, возможно, жизнь и мир в целом
Еще от Иосафата Абу
Иосафата Абу
Как обновить операционную систему синтезатора Yamaha MONTAGE6/MONTAGE7/MONTAGE8 до версии 1.50
90 003Вышла версия 1.5 MONTAGE OS! Это обновление улучшает звук, управление и рабочий процесс и понравится музыкантам всех типов. МОНТАЖ…
3 минуты чтения · 18 февраля 2017 г. 097
4 минуты чтения·25 октября 2018 г.
Иосафат Абу
100 Days Of ML Code — День 097
Резюме дня 096
Чтение за 4 минуты·24 октября 2018 г.
Иосафат Абу 9 0003
100 Days Of ML Code — Day 096
Резюме из день 095
Чтение: 3 мин·23 октября 2018 г.
Просмотреть все от Иосафата Абу
Рекомендовано на Medium
The PyCoach
в
You вы используете ChatGPT неправильно! Вот как опередить 99% пользователей ChatGPT
·7 минут чтения·17 марта
Aleid ter Weel
in
10 Чем заняться вечером вместо просмотра Netflix
Привычки без устройств для повышения производительности и счастья.
·5 мин чтения·15 февраля 2022 г.
Списки
Истории, которые помогут вам расти как дизайнеру
11 историй·16 сохранений
Хорошее мышление о продукте
11 рассказы·26 сохранений
Список для чтения вне офиса компании
8 историй·3 сохранения
Введение в People Ops: Not Your Mama’s HR
8 историй·1 сохранение
Christina Sa
в
Пример из практики UX-дизайна, благодаря которому меня наняли
Получить работу в сфере UX-дизайна непросто, но один конкретный пример помог мне выделиться из толпы. Я разработал нетрадиционный…
·8 мин. чтения·16 марта
Непристойный
10 секунд, которые закончились моим 20-летним браком
В Северной Вирджинии август, жарко и шумно идентификатор Я до сих пор не принял душ после утренней пробежки. Я ношу свою домохозяйку…
·4 минуты чтения·16 февраля 2022 г.
Михал Малевич
Существует ПЯТЬ уровней навыков пользовательского интерфейса.
Только уровень 4+ позволяет нанять вас.
·6 минут чтения·25 апреля
Zulie Rane
в
Если вы хотите стать творцом, удалите все (кроме двух) платформы социальных сетей
В октябре 2022 год, во время всего Илона Маска фиаско, я наконец-то удалил Твиттер со своего телефона. Примерно в то же время я также вышел из…
·8 мин чтения·19 апреля
См. дополнительные рекомендации
Статус
Карьера
Преобразование текста в речь
Начало работы на рабочем столе
Вы можете использовать значки Font Awesome на рабочем столе в дизайнерских макетах, презентациях и в других местах ваших настольных приложений.
Мы расскажем, какие файлы и каталоги содержатся в настольной версии Font Awesome, а также подробно об использовании шрифтов на основе лигатур и SVG.
Перед началом работы
Убедитесь, что вы уже:
- Загрузили файлы Font Awesome v6 и держите их под рукой.
- Извлечено Обновление на рабочем столе, если вы выполняете обновление с предыдущей версии.
Что в загрузке?
Наша загрузка для рабочего стола содержит следующие каталоги и файлы:
| Папки и файлы | Что они собой представляют |
|---|---|
/otfs | Файлы шрифтов на основе лигатур для каждого стиля в Font Awesome |
/svgs | Индивидуальные оптимизированные векторные файлы .svg для каждой иконки в Font Awesome (разделенные по стилям) |
Установите лигатуру- файлы шрифтов на основе
Приступайте к работе, используя лигатуры для вставки значков в документы, предварительно установив все стили, которые вы хотели бы использовать. Вот краткое изложение того, какой файл шрифта соответствует какому стилю Font Awesome:
| Файлы шрифтов | Стиль иконок | Доступность |
|---|---|---|
/otfs/Font Awesome 6 Free-Solid-900 . | Solid | Бесплатные планы |
/otfs/ Font Awesome 6 Free-Regular-400.otf | Regular | Free Plans |
/otfs/Font Awesome 6 Brands-Regular-400.otf | Бренды | Бесплатные планы |
/otfs/Font Awesome 6 Pro-Solid-900.otf | Solid | Только Pro |
/otfs/Font Awesome 6 Pro-Re gular-400.otf | Обычный | Pro Только |
/otfs/Font Awesome 6 Pro-Light-300.otf | Light | Только Pro |
/otfs/F ont Awesome 6 Pro-Thin-100.otf | Тонкий | Только Pro |
/otfs/Font Awesome 6 Duotone-Solid-900.otf | Duotone | Только Pro |
/otfs/Font Awesome 6 Sharp-Solid -900.otf | Sharp Solid | Pro Только |
/otfs/Font Awesome 6 Sharp-Regular-400. | Sharp Regular | Только Pro |
/otf fs/Font Awesome 6 Sharp-Light-300.otf | Sharp Легкий | Только Pro |
otf 
otf Вы захотите установить их в Диспетчер шрифтов, который ваша операционная система использует для управления шрифтами. Для Mac это часто Font Book или Font Explorer X. Для Windows это панель управления шрифтами. Кроме того, в зависимости от вашей операционной системы и управляющего программного обеспечения, убедитесь, что вы активировали/включили эти шрифты в диспетчере шрифтов после их установки . Они будут доступны для использования в ваших приложениях только в том случае, если они были активированы.
Включить лигатуры
Многие настольные программы имеют параметр для включения лигатур. В большинстве случаев мы обнаруживаем, что он включен по умолчанию, но если у вас возникли проблемы с лигатурами, вы можете проверить, включены ли лигатуры.
У нас есть инструкции для нескольких распространенных приложений, перечисленных ниже, но вы должны проверить документацию для вашей конкретной программы и версии.
Adobe Creative Cloud
В Photoshop лигатуры можно переключать с помощью кнопки «fi» в палитре символов. В Illustrator вы можете найти кнопку «fi» в палитре Open Type.
Windows + Microsoft Office
Чтобы включить лигатуры в Microsoft, откройте настройки шрифта, нажав Ctrl-D. На вкладке «Дополнительно» в разделе «Функции открытого типа» установите для лигатур значение «Все» и убедитесь, что установлен флажок «Использовать контекстные альтернативы».
Использование SVG
Вы можете добавлять наши SVG-файлы в большинство приложений для настольного дизайна с поддержкой векторной графики, таких как Figma, Sketch и Adobe Illustrator.