Используйте значок 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 в качестве значка без преобразования в изображение. Вы должны преобразовать символ в изображение ..

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