Используйте значок Font Awesome в качестве значка

109

Можно ли использовать значок Font Awesome в качестве значка значка? Вы знаете, маленький значок, который появляется рядом с заголовком веб-сайта во вкладке браузера?

favicon font-awesome Коннор Блэк
источник

Ответы:

38

Да, это так. Просто сделайте снимок экрана с изображением нужного персонажа, вырежьте нужную часть и сохраните ее как изображение (.ico).

А теперь серьезно, вы можете проверить форматы, поддерживаемые каждым браузером: http://en.wikipedia.org/wiki/Favicon#File_format_support

Если вашими персонажами являются изображения или векторные файлы, вы будете в порядке с большинством браузеров, кроме IE (потому что MS вас ненавидит) . В противном случае вам действительно придется сначала сохранить их как изображения.

Renan
источник
3
Но позволяет ли это лицензия?
art-solopov
3
@ art-solopov Да, это так - вы можете проверить это на странице их лицензии: fortawesome.github.io/Font-Awesome/license
Renan
Я прочитал OFL и не нашел ничего, связанного с изменением формата шрифта или составлением изображения из глифов. Извините, если я что-то упускаю, не могли бы вы указать мне на конкретный раздел? Спасибо.
art-solopov
Проголосовали против за предложение скриншота. Есть много способов добиться этого без потерь.
metaColin
2
@marcogmonteiro Если вы посетите fontawesome.com/download, вы можете загрузить значки в виде файлов .svg. Большинство браузеров принимают актив .svg в качестве значка. Если вам нужна поддержка старых версий IE, вы можете получить хороший чистый растровый ресурс (например, .png), преобразовав .svg с помощью Photoshop или Illustrator.
metaColin
290

РЕДАКТИРОВАТЬ: я предлагаю вам использовать http://gauger.io/fonticon

Для этого я создал онлайн-генератор Font Awesome Favicon!

См. Font Awesome Favicon Generator .

Пол Ферретт
источник
7
Хороший, быстрый и эффективный. +1!
U rsus
2
Нужно позволить нам определить цвет!
6
@Freddy на самом деле генератор уже способен на это, я просто не создал для него пользовательский интерфейс. Передайте параметры bg и fg для фона и переднего плана соответственно, используя значения цвета RGB HEX. например, paulferrett.com/fontawesome-favicon/…
Пол Феррет
7
@ paul-ferrett: есть ли способ изменить размер созданной иконки?
vgoklani
4
Хорошая реализация. К сожалению, в настоящее время одного фавикона 16x16 недостаточно. Было бы неплохо скачать zip-архив со всеми необходимыми значками всех необходимых размеров.
coorasse
86

Я также создал онлайн- генератор Font Awesome Favicon Generator, который имеет дополнительные функции, отсутствующие в решении Пола Ферретта.

фавикон

  • предварительный просмотр значка в браузере
  • размер значка
  • прозрачный значок и фон
  • огромный размер изображения (значок может быть сколь угодно подробным)
  • набор значков можно обновить с помощью запроса на перенос github
  • обновление 06/2017 обновление до Font Awesome 4.7
  • обновление 06/2017 нечеткий поиск и поиск по ключевым словам
  • обновление 09/2017 сложенные значки
  • обновление 06/2018 обновление до Font Awesome 5.0.13
  • обновление 11/2018 обновление до Font Awesome 5.5.0
  • обновление 04/2019 обновление до Font Awesome 5.8.1
  • Обновление 04/2019 добавлена ​​поддержка Font Awesome Pro !

Если вам нужны дополнительные функции, пожалуйста, отправьте здесь вопрос или запрос на перенос .

затмение
источник
@vgoklani Если у вас есть предложения, дайте мне знать :)
eclipse
@eclipse: Большое вам спасибо! Это избавило меня от такой боли.
sam
Спасибо за большие усилия, с некоторыми извещений первых: когда я загрузить изображение, всегда 1024 по ширине и высоте, он должен быть изменен до фактического размера. во-вторых: размер ползунка должен быть записан или лучше может быть установлен в числовом поле
Саиф
1
Я улучшил его, добавив поддержку наложенных значков. PR ожидает рассмотрения.
Чунг
2
Мне нравится функция предварительного просмотра вкладок в реальном времени!
Tot Zam
11

Любое изображение можно загрузить на сайт генератора значков, например

http://favicon-generator.org/

или

http://www.favicon.cc/

следуйте интерактивным инструкциям на выбранном вами сайте. Обычно это всего лишь трехэтапный процесс. Сохраните значок на верхнем уровне вашего сайта.

Для совместимости между браузерами я рекомендую всегда использовать изображения для значков. Даже если некоторые сайты, которые вы создаете, предназначены только для современных браузеров, все равно преобразуйте ваши значки в изображения. Постоянное использование одного и того же процесса избавляет вас на одну проблему.

другое
источник
2
«Обратите внимание, что значок не будет отображаться в Chrome, если ваш сайт является локальным, только тогда, когда вы загрузите сайт на свой веб-хост». это не правильно.
U rsus
если у вас есть проблемы с отображением значка избранного локально, см. stackoverflow.com/questions/16375592/…
otherDewi 01
7

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

Шакил Ахмед
источник