Начало работы с Font Awesome
Font Awesome CDN Супер легко
CDN Font Awesome самый наипростейший способ начать использовать Font Awesome на вашем сайте или в приложении, и всего-лишь одной строкой кода. Не нужно ничего скачивать и устанавливать.
Для чего нужен ваш email?
или
Расширенная кастомизация Легко
Хотите управлять и размещать файлы Font Awesome сами? Вы можете скачать, кастомизировать и использовать иконки с вашими настройками. В наборе файлов Font Awesome есть как и простой CSS-файл, так и файлы препроцессоров: Sass и Less.
Скачать
Использование Sass или Less
Используйте этот метод для кастомизации Font Awesome 4.7.0 при помощи LESS или SASS.
- Скопируйте полностью папку
font-awesomeв папку вашего проекта. - В вашем проекте откройте файлы
font-awesome/less/variables.или
font-awesome/scss/_variables.scssи отредактируйте@fa-font-pathили$fa-font-pathсоответственно, для того, чтобы указать путь к папке со шрифтами.@fa-font-path: "../font";
Путь к папке со шрифтами должен указывать относительно скомпилированной папки css.
- Скомпилируйте ваши LESS или SASS файлы при помощи компилятора. Должно все заработать.
- Посмотрите примеры для начала работы с Font Awesome!
или
Продвинутый уровень Профи
Sass Ruby Gem
Используйте официальный Ruby Gem Font Awesome SASS для легкого подключения Font Awesome SASS в ваш Rails- или Compass-проект. Занимается поддержкой: @supercodepoet.
- Добавьте нижеуказанную строку в Gemfile вашего проекта:
gem 'font-awesome-sass'
- Далее запустите:
$ bundle
- Или установите вручную:
$ gem install font-awesome-sass
Если вы используете Rails, то вставьте нижеуказанный код, например, в файл application.:
scss
@import "font-awesome-sprockets"; @import "font-awesome";
Дополнительная информация
Валидаторы
Для того, чтобы обеспечить наилучший результат в старых и глючных браузерах, Font Awesome в некоторых случаях использует хаки CSS для того, чтобы обойти глюки и ошибки в браузерах. Естественно, эти хаки вызывают предупреждения при проверке кода в валидаторах. Также, Font Awesome в нескольких ситуациях использует новые свойства CSS , которые еще не полностью стандартизированы, но используются они исключительно для прогрессивного улучшения.
На практике эти предупреждения валидатора не имеют значения, так как большая часть CSS работает без хаков и, соответственно, они не принимают участие в работе тех участков, где они не используются. Собственно, поэтому мы и игнорируем эти предупреждения.
Гайд по валидаторам от Bootstrap Team под лицензией CC BY 3.0
Internet Explorer 8 и @font-face
IE8 имеет несколько проблем с @font-face при совместном использовании с псевдоэлементом :before.
Font Awesome как раз использует такую комбинацию. Если страница закеширована или загружена без наведенного курсора мыши на окно браузера (например, при нажатии на кнопку «обновить» или при загрузке контента через фрейм), то страница будет сгенерирована до подгрузки шрифта. Наведение курсора мыши на страницу (body) должно отобразить некоторые иконки, наведение курсора на остальные не подгруженные иконки также их реанимирует.
Подробности данной проблемы.
Гайд по использованию @font-face в Internet Explorer 8 от Bootstrap Team под лицензией CC BY 3.0
Необходима поддержка IE7 ?
Если вам нужна поддержка IE7 , то примите мои соболезнования. Ну правда. Font Awesome 4.7.0 не поддерживает IE7и версии ниже. Вам необходимо прочитать инструкции по FA 3.2.1 для использования в IE7. Затем можете пойти и пожаловаться тому, кто потребовал поддержку IE7 .
Решение ошибок
Если у вас возникли проблемы в работе с Font Awesome, то можете поискать решение на
wiki -странице по частым ошибкам.
Занимается поддержкой: @gtagliala.
Font Awesome 5 доступен!
Font Awesome 5
или
Спасибо, просто скачать
Font Awesome 4
Что нового в Font Awesome
Что нового в последней версии — Font Awesome 4.7
Font Awesome всегда становится чуточку лучше. Здесь вы узнаете, что нового появилось в последней версии Font Awesome: 4.7. Есть какие-то идеи для новых возможностей? Внесите свой вклад.
Мануал об общедоступности Подробное описание о том, как использовать иконки в зависимости от ваших задач. Сделайте иконки на вашем сайте доступными для большинства людей. Больше примеров Теперь каждая страница иконки стала лучше, стало больше примеров кода, которые пользователи могут скопировать и вставить в свой проект.
Ограничения не ограничения Мы добавили новую категорию иконок специально для сферы людей с ограниченными возможностями, и начали мы с 15 иконок.
Если вам нужно больше иконок данной тематики, то вы можете сделать запрос на
новые иконки!41 новая иконка версии 4.7
Как вы и просили, Font Awesome включает в себя 41 новую иконку в версии 4.7. Как запросить новые иконки? Да вот так.
Пример address-book
Пример address-book-o
Пример address-card
Пример address-card-o
Пример bandcamp
Пример bath
Пример bathtub (синоним)
Пример drivers-license (синоним)
Пример drivers-license-o (синоним)
Пример eercast
Пример envelope-open
Пример envelope-open-o
Пример etsy
Пример free-code-camp
Пример grav
Пример handshake-o
Пример id-badge
Пример id-card
Пример id-card-o
Пример imdb
Пример linode
Пример meetup
Пример microchip
Пример podcast
Пример quora
Пример ravelry
Пример s15 (синоним)
Пример shower
Пример snowflake-o
Пример superpowers
Пример telegram
Пример thermometer (синоним)
Пример thermometer-0 (синоним)
Пример thermometer-1 (синоним)
Пример thermometer-3 (синоним)
Пример thermometer-4 (синоним)
Пример thermometer-empty
Пример thermometer-full
Пример thermometer-half
Пример thermometer-quarter
Пример thermometer-three-quarters
Пример times-rectangle (синоним)
Пример times-rectangle-o (синоним)
Пример user-circle
Пример user-circle-o
Пример user-o
Пример vcard (синоним)
Пример vcard-o (синоним)
Пример window-close
Пример window-close-o
Пример window-maximize
Пример window-minimize
Пример window-restore
Пример wpexplorer
Все еще пользуетесь версией 3.
2.1?Для получения полной документации по изменению синтаксиса в 4.7 посмотрите примеры. Информацию по изменению названий иконок @gtagliala поместил в отличную wiki-страницу, где задокументированы все изменения.
Foundation Icon Fonts 3 | Детская площадка от ZURB
Foundation Icon Fonts 3 | Детская площадка от ZURBИспользование 283 значков с 1 шрифтом
Пользовательская коллекция из 283 значков, которые хранятся в удобном веб-шрифте. Просмотреть все значки »
Придайте им стиль с помощью CSS
Пара строк CSS и правильная разметка помогут вам быстро начать работу. Как их использовать »
Создавайте бесконечные варианты
Легко настраивайте эти значки любого размера, цвета и стиля в CSS. Посмотреть образцы »
Как они были построены
Здесь, в ZURB, мы создали эти значки в соответствии со специальными стандартами, которые дают единый голос и стиль для разработки удивительного набора шрифтов, который каждый может любить, наслаждаться и использовать на своем веб-сайте.
- Геометрический Все значки имеют базовые формы, такие как треугольники, квадраты, прямоугольники и круги.
- Скругленные углы Все значки сделаны со скругленными углами, чтобы сделать значки более мягкими и доступными.
- Толщина толстой линии Для всех значков используется более толстая линия, а не тонкая, чтобы значки можно было масштабировать, а также придать им дружественный вид, к которому мы стремимся.
- Естественные углы Мы задали эти конкретные градусы поворота, чтобы сохранить согласованность в наборе.
- Масштабируемость При создании этих значков мы думали о том, как эти значки будут масштабироваться при малых и больших размерах.
Как их использовать
Мы упростили вам работу с этими значками! Просто скачайте шрифт и следуйте этим простым инструкциям. Вы будете рок-н-ролл в кратчайшие сроки.
Слияние стилей
Очень легко подключить таблицы стилей пакета, чтобы воплотить в жизнь ваш новый иконочный веб-шрифт. Когда вы загрузите шрифты, вы сможете просто объединить файлы Foundation-icons.css и Foundation-icons.[eot/ttf/svg/woff] прямо в Foundation.
Напишите свою разметку
Мы использовали для элементов значков. Вы просто применяете соответствующие классы, которые соответствуют значку, который вы хотите использовать. Вот как выглядит разметка:
Стиль прочь!
Вы можете использовать несколько замечательных приемов CSS, чтобы начать изучать различные стили. Мы сами придумали несколько, посмотрите:
Получите потрясающую работу по проектированию или дизайну продукта
через доску объявлений ZURB
Загрузите шрифты
Мы собрали несколько удобных пакетов для загрузки, которые легко впишутся в ваш проект Foundation!
Загрузите шрифт
Попробуйте Foundation
Если вы еще не пробовали Foundation, мы настоятельно рекомендуем это сделать.
Вы будете программировать быстрее и лучше в кратчайшие сроки!
Посетите Фонд
Мысли?
Перейдите к сообщению в блоге, чтобы узнать, что говорят другие, или сообщить нам, что вы думаете.
Ищете старый набор?
Мы отказались от старой версии значков, потому что реализация была не очень доступной. Если вы все еще хотите получить к ним доступ, вы можете получить их на Playground.
Войдите в систему, используя свой идентификатор ZURB
Объяснение вашего идентификатора ZURB
Вы будете использовать свой идентификатор ZURB для входа во все свойства ZURB — университет, продукты и фонд. Одна учетная запись для управления всем этим.
Университет
Ресурсы по дизайну продукции, курсы и обучение.
Приложения для дизайна
Создание прототипов, итерация и сбор отзывов о ваших продуктах.
Foundation
Самый передовой интерфейсный фреймворк в мире.
×
Icon Fonts против SVG Icons: что лучше для вас?
РазметкаВеб-дизайнВеб-разработка
Современные веб-страницы невозможно представить без иконок. Они используются везде: в описаниях товаров, контактных данных и многих других элементах страницы. Двумя популярными вариантами реализации значков являются Icon Fonts и SVG Icons. Каковы их преимущества и недостатки? Что выбрать для собственного сайта? Этот пост должен дать вам все ответы.
Современные веб-страницы трудно представить без этих крошечных, но полезных элементов — иконок. Вы обязательно найдете их в навигационных меню, контактных данных, описаниях продуктов и т. д. Как неотъемлемая часть дизайна пользовательского интерфейса, значки также могут представлять собой проблему для разработчиков.
Напряженные дебаты о шрифтах-значках и шрифтах SVG ведутся уже некоторое время. Теперь мы рассмотрим, что такое иконочные шрифты и значки SVG, как их можно использовать и какой метод следует предпочесть в конкретных ситуациях.
Что такое шрифты значков?
Иконочные шрифты, как следует из названия, представляют собой шрифты, содержащие значки вместо букв и цифр. К таким значкам относятся символы и глифы. Как правило, набор иконочных шрифтов хранится в файле шрифта.
Иконочные шрифты были де-факто методом добавления векторных значков на веб-сайты до начала 2020 года, когда реальная поддержка SVG в различных браузерах стала стабильной.
Почему иконочные шрифты стали популярны?
Во-первых, каждый символ в иконочных шрифтах масштабируется. В основном, вы можете настраивать значки с помощью CSS, изменяя их размер, цвет и форму. Вам нужно только создать соответствующие классы в вашем CSS.
Во-вторых, возможность указать на файл шрифта позволяет дизайнерам использовать любой шрифт, который они хотят, не беспокоясь о том, безопасен ли он для Интернета. Браузеры запрашивают указанный файл и показывают значок.
В-третьих, иконочные шрифты имеют небольшой размер, поэтому загружаются достаточно быстро.
Хотя иконочные шрифты имеют ряд существенных преимуществ, мы не должны игнорировать их недостатки.
Причины, по которым следует избегать использования шрифтов значков
Во-первых, мы упомянули масштабируемость шрифтов значков. Действительно, при необходимости можно изменить цвет шрифта и добавить к нему тень. Однако помните, что к таким значкам можно применить только один цвет. Быть монохромным и иметь ограничения по стилю — один из недостатков, который значки шрифтов могут представлять для дизайнеров/разработчиков.
Что касается размера, дизайн иконочных шрифтов предполагает определенную сетку, такую как 16×16, 32×32, 48×48 и т. д. Изменение сетки может привести к потере качества значка.
Хотя вы можете настроить шрифты значков для различных размеров области просмотра, вы также должны помнить о том, чтобы поместить их в классы aria, чтобы сделать их доступными для браузеров.
Еще одна проблема, которая может возникнуть со значками шрифтов, — это мигание нестилизованного содержимого (FOUC).
Чтобы использовать иконочные шрифты, вы должны применить правило @font-face, которое предписывает браузерам выполнять HTTP-запрос для файла шрифта.
При обработке HTML и связанных с ним файлов браузер строит объектную модель документа (DOM) в режиме реального времени. В зависимости от размера файла шрифта, сетевых условий и оборудования пользователя извлечение шрифта может занять некоторое время.
Пока браузер не сможет получить доступ к активу шрифта, он может отображать текстовое содержимое HTML до его полного получения, что приводит к FOUC. Таким образом, есть шанс, что до полной загрузки шрифта вместо значков будут отображаться случайные глифы или символы. Такие вспышки могут раздражать и негативно влиять на работу пользователей.
Более того, файлы иконочных шрифтов обычно содержат множество элементов, многие из которых вы, вероятно, не будете использовать. Тем не менее, файл будет занимать место.
Что такое значки SVG?
Файл SVG (масштабируемый векторный формат), как следует из названия, представляет собой формат изображения для векторной графики с возможностью масштабирования.
Файлы SVG используют язык разметки на основе XML для описания векторной графики. Другими словами, изображения SVG основаны на тексте и могут работать с CSS, JavaScript, DOM и т. д.
Реализация значков SVG
Существуют различные способы добавления SVG на веб-сайты. Вы можете реализовать значки SVG либо внешне, в виде изображения с тегом , либо встроить в HTML.
Внешние значки SVG
Для отображения значка SVG следует использовать HTML-элемент , аналогичный загрузке файлов PNG, JPG или GIF:
Встроенные иконки SVG
Встроенные SVG будут выглядеть так:
Этот конкретный тип добавления SVG не увеличивает запросы к серверу и, следовательно, не влияет отрицательно на производительность веб-сайта.
Преимущества использования значков SVG
Давайте рассмотрим основные преимущества использования SVG на веб-страницах.
Масштабируемость
В отличие от изображений PNG или JPEG, значки SVG масштабируются, поэтому ваша веб-страница не будет страдать от потери качества, когда посетители используют различные устройства для ее просмотра.
Более того, поскольку браузеры обрабатывают SVG как изображения, для SVG не существует правил сглаживания. Иконочные шрифты, напротив, уязвимы для этих приемов и могут выглядеть размытыми. Вы можете быть уверены, что визуальное качество SVG будет идеальным во всех разрешениях.
Параметры настройки
SVG более гибкие, чем шрифты значков. Во-первых, вы можете добавить больше цветов с помощью SVG. В отличие от одноцветных шрифтов значков, значки SVG допускают градиенты. Кроме того, вы можете анимировать отдельные штрихи в значках SVG.
Позиционирование значков
Позиционирование шрифта SVG по сравнению со шрифтом значка проще с помощью SVG. Чтобы разместить значок шрифта, вам может потребоваться настроить различные свойства, такие как расстояние между словами и буквами, выравнивание, высота строки или размер шрифта.
Для SVG достаточно указать размер.
Меньше запросов к серверу
Как мы уже говорили, при указании иконочного шрифта в CSS с правилом @font-face необходимо указать URL, по которому этот шрифт можно найти. Таким образом, использование правила @font-face означает указание браузеру запрашивать файл шрифта.
При использовании SVG сканеру не нужно отправлять запросы на сервер для отображения значка.
Оптимизация SEO
Поисковые системы могут сканировать и индексировать файлы SVG. Встроенные семантические элементы, такие как