общедоступность

Versioning

Font Awesome will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format:

The major version «5» is part of an umbrella release. It includes many different types of files and technologies. Therefore we deviate from normal SemVer in the following ways:

  • Any release may update the design, look-and-feel, or branding of an existing icon
  • We will never intentionally release a version update that breaks backward compatibility
  • A release may include backward-incompatible changes but we will write clear upgrading instructions in UPGRADING.md
  • A or release will never remove icons
  • Bug fixes will be addressed as releases unless they include backward incompatibility then they will be releases

Интеграция с Font Awesome

Конечно, вы можете рассматривать новый шрифт как отдельный набор иконок. Но разве не было бы круто расширить сам набор Font Awesome? Давайте сделаем это!


Единственная вещь, которую нужно понять, заключается в том, что мы будем наследовать CSS стили, определённые Font Awesome CSS файлом. Например, он будет содержать примерно такую запись:

Это значит, что когда мы следующим образом определяем элемент иконки, она будет наследовать стили , и из кода выше:

Теперь давайте определим наш собственный CSS файл. Назовём файл .

Первой записью в этом файле должно идти объявление правила font-face. Может быть сделано как ниже. Это несложно. Лишь немного базового CSS.

Далее мы можем определить желаемые иконки:

Обратите внимание, что мы определяем иконки как псевдо-элементы, используя селектор. Таким образом, мы можем внедрить нужный нам контент внутрь элемента, который использует объявленные классы

В созданном нами шрифте FontMoreAwesome “A”, “B” и “C” обозначаются иконками для Troll, Lol и Like-a-boss соответственно. Хотя это не лучший способ сделать это.

Font Awesome использует области для частного использования (Unicode Private Use Area, PUA), чтобы застраховать экранные читалки от зачитывания случайных символов, которые и представляют собой иконки.


Но, для простоты рассказа, в нашем примере мы будем держаться букв английского алфавита.

Ещё один момент, достойный упоминания — в примере выше, при внедрении на страницу своего контента, мы перезаписываем правило font-family, определённое Font Awesome.

Как подключить Font Awesome

В этой главе мы подробно разберемся как подключить Font Awesome 5 всеми возможными способами. И какой из них лучше выбрать.

Подключение с помощью CDN

Чтобы подключить иконочный шрифт Font Awesome 5 с помощью CDN необходимо перейти на страницу: Font Awesome Start и выставить необходимые параметры. Полученный код вставляем в тег вашего сайта, на тех страницах где вы собираетесь использовать иконки.

Скриншот №1

На скриншоте №1 изображены настройки, которые я использую.

  1. Выбираем версию, которая нам нужна. Free — бесплатная версия. Pro — платная и имеет дополнительные стили и наборы иконок.
  2. Начертание шрифта, которое мы будем использовать в своем проекте.
  3. Что мы будем использовать. Webfont — иконочный шрифт. SVG — иконки в формате .svg
  4. Сгенерированный код для подключения 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:

Скриншот №2

Для работы иконочного шрифта необходимы только папки выделенные красным. И то в паке /CSS нам нужен только один файл css/all.min.css (Смотрите скриншот №3)

Скриншот №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

У меня это выглядит так:

Скриншот №4

В папке fontawesome хранится один файл all.min.css

License

Font Awesome Free is free, open source, and GPL friendly. You can use it for commercial projects, open source projects, or really almost whatever you want.

  • Icons — CC BY 4.0 License
  • Fonts — SIL OFL 1.1 License
  • Code — MIT License

Attribution is required by MIT, SIL OLF, and CC BY licenses. Downloaded Font Awesome Free files already contain embedded comments with sufficient attribution, so you shouldn’t need to do anything additional when using these files normally.

We’ve kept attribution comments terse, so we ask that you do not actively work to remove them from files, especially code. They’re a great way for folks to learn about Font Awesome.

Как использовать Font Awesome

В этой части статьи мы разберем как правильно использовать Font Awesome в веб-разработке или дизайне на примере Photoshop.

Как использовать Font Awesome в HTML

Это самый простой способ использования иконочного шрифта. Достаточно выбрать из каталога иконок Font Awesome нужную иконку и вставить ее код в нужное место вашего html документа. На скриншоте № 5 под цифрой 1 изображено место откуда можно узнать код иконки.

Скриншот №5

Как использовать Font Awesome в псевдоэлементах after и before CSS. Параметр content.

Чтобы использовать иконочный шрифт для его отображение в псевдоэлементах after или before, нужно использовать Unicode иконки. Который можно взять на странице с нужной иконкой (на скриншоте №5 цифра 2)


Теперь пишем стили css для элемента before или 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:

Скриншот №6

После установки можно использовать Font Awesome в фотошопе, для этого мы копируем необходимую нам иконку с каталога (цифра 3 на скриншоте №5) и вставляем в photoshop как текст. Незабываем выбрать в настройках семейство шрифта Font Awesome.

Скриншот №7

Интеграция

Интегрировать Font Awesome очень просто в Twitter Bootstrap, а так же использовать отдельно на ваше усмотрение.

Bootstrap + Font Awesome

Используйте Font Awesome с Bootstrap CSS.

Скопируйте папку со шрифтами Font Awesome в Ваш проект. Затем скопируйте font-awesome.min.css в Ваш проект. Откройте файл font-awesome.min.css и отредактируйте путь к файлам со шрифтами, если это необходимо. Папка со шрифтами находится относительно (выше) директории с CSS-файлами. Внутри тега Вашей html-страницы, поместите ссылку на font-awesome.min.css.

Обратите внимание на примеры использования Font Awesome перед началом работы над своим проектом!

Кастомная интеграция Bootstrap + Font Awesome с использованием LESS

Используйте этот метод для интеграции Font Awesome в Twitter Bootstrap используя LESS.

Скопируйте папку со шрифтами Font Awesome в Ваш проект. Затем скопируйте font-awesome.less в директорию bootstrap/less. Откройте bootstrap.less и замените на

Откройте файл font-awesome.less и отредактируйте переменную так что бы она указывала на директорию со шрифтами.


@FontAwesomePath: «../font»;

Папка со шрифтами находится относительно (выше) директории с скомпилированными CSS-файлами. Перекомпилируйте Ваш LESS в случае использования статичного компилятора

В другом случае все готово к работе. Обратите внимание на примеры использования Font Awesome перед началом работы над своим проектом!

Кастомная интеграция Bootstrap + Font Awesome Integration используя SASS или SCSS

Не используете Bootstrap?

Font Awesome — работает и без использования Twitter Bootstrap.

Скопируйте папку со шрифтами Font Awesome в Ваш проект. Затем скопируйте font-awesome.less или font-awesome.min.css в папку Вашего проекта. Откройте font-awesome.less либо font-awesome.min.css и отредактируйте пути к шрифтам (см

пример выше). Обратите внимание на примеры использования Font Awesome перед началом работы над своим проектом!

Font Awesome 5

Font Awesome 5 IntroIcons AccessibilityIcons AlertIcons AnimalsIcons ArrowsIcons Audio & VideoIcons AutomotiveIcons AutumnIcons BeverageIcons BrandsIcons BuildingsIcons BusinessIcons CampingIcons CharityIcons ChatIcons ChessIcons ChildhoodIcons ClothingIcons CodeIcons CommunicationIcons ComputersIcons ConstructionIcons CurrencyIcons Date & TimeIcons DesignIcons EditorsIcons EducationIcons EmojiIcons EnergyIcons FilesIcons FinanceIcons FitnessIcons FoodIcons Fruits & VegetablesIcons GamesIcons GendersIcons HalloweenIcons HandsIcons HealthIcons HolidayIcons HotelIcons HouseholdIcons ImagesIcons InterfacesIcons LogisticsIcons MapsIcons MaritimeIcons MarketingIcons MathematicsIcons MedicalIcons MovingIcons MusicIcons ObjectsIcons Payment & ShoppingIcons PharmacyIcons PoliticalIcons ReligionIcons ScienceIcons Science FictionIcons SecurityIcons ShapesIcons ShoppingIcons SocialIcons SpinnersIcons SportsIcons SpringIcons StatusIcons SummerIcons Tabletop GamingIcons ToggleIcons TravelIcons Users & PeopleIcons VehiclesIcons WeatherIcons WinterIcons Writing

Создание шрифта

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

Теперь мы должны заполнить секции желаемыми изображениями. Вы можете распечатать шаблон и нарисовать в нём иконки от руки, или использовать инструмент вроде Adobe Photoshop, GIMP с изображениями, которые вы скачаете из интернета.

После заполнения шаблона, он будет выглядить примерно так:

Следующая вещь, которую вы должны сделать, достаточно проста. Загрузите заполненный шаблон на calligraphr, и нажмите на кнопку “build font” — и БУМ! Вы можете скачать ваш персональный шрифт. Давайте назовём его .

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


С этим читают