Можно ли использовать значок Font Awesome в качестве значка значка? Вы знаете, маленький значок, который появляется рядом с названием веб-сайта во вкладке браузера?
Используйте значок Font Awesome в качестве значка
Ответы (6)
Да, это так. Просто сделайте снимок экрана с изображением нужного персонажа, вырежьте нужную часть и сохраните ее как изображение (.ico).
А теперь серьезно, вы можете проверить форматы, поддерживаемые каждым браузером: http://en.wikipedia.org/wiki/Favicon#File_format_support
Если вашими персонажами являются изображения или векторные файлы, вы будете в порядке с большинством браузеров, кроме IE (потому что MS вас ненавидит). В противном случае вам действительно придется сначала сохранить их как изображения.
person
Geeky Guy
schedule
09.08.2013
Но позволяет ли это лицензия?
- person art-solopov; 13.07.2015
@ art-solopov Да, это так - вы можете проверить это на странице их лицензии: fortawesome. github.io/Font-Awesome/license
- person Geeky Guy; 14.07.2015
Я прочитал OFL и не нашел ничего, связанного с изменением формата шрифта или составлением изображения из глифов. Извините, если я что-то упускаю, не могли бы вы указать мне на конкретный раздел? Спасибо.
- person art-solopov; 21.07.2015
Проголосовали против за предложение скриншота. Есть много способов добиться этого без потерь.
- person metaColin; 11.01.2018
@metaColin хочет объяснить, что это за способы без потерь?
- person marcogmonteiro; 24.02.2020
@marcogmonteiro Если вы посетите fontawesome.com/download, вы можете загрузить значки в виде файлов .svg. Большинство браузеров принимают актив .svg в качестве значка. Если вам нужна поддержка старых версий IE, вы можете получить хороший чистый растровый ресурс (например, .png), преобразовав .svg с помощью Photoshop или Illustrator.
- person metaColin; 28.02.2020
РЕДАКТИРОВАТЬ: я предлагаю вам использовать http://gauger.io/fonticon
Для этого я создал онлайн-генератор Font Awesome Favicon!
См. Font Awesome Favicon Generator.
person
Paul Ferrett
schedule
10.02.2015
Хороший, быстрый и эффективный. +1!
- person U r s u s; 12.02.2015
Нужно позволить нам определить цвет!
- person ; 29.04.2015
@Freddy на самом деле генератор уже способен на это, я просто не создал для него пользовательский интерфейс. Передайте параметры bg и fg для фона и переднего плана соответственно, используя значения цвета RGB HEX. например, paulferrett.com/fontawesome-favicon/
- person Paul Ferrett; 30.04.2015
@ paul-ferrett: есть ли способ изменить размер сгенерированного значка?
- person vgoklani; 18.05.2015
@PaulFerrett Действительно мило :-), но немного устарело :-(. Не могли бы вы добавить все новые значки?
- person agad; 09.02.2016
Новая версия @agad только что вышла с v4.5
- person Paul Ferrett; 03.03.2016
@PaulFerrett Спасибо :-)
- person agad; 03.03.2016
Ответ, помеченный как правильный, принадлежит мне, но я тоже считаю, что ответ Пола следует отметить как правильный.
- person Geeky Guy; 27.04.2016
Я хочу, чтобы Google проиндексировал это приложение. Каждый раз, когда я выполняю поиск в Google, я возвращаюсь сюда и не вижу ни одного списка в поисковой системе для этого замечательного приложения.
- person jtlindsey; 28.06.2016
Я поставил +1, потому что вы решили мою непосредственную проблему с помощью своего онлайн-инструмента. Однако это сайт для программистов, и вы ничего не сказали о том, как преобразовать глиф шрифта в файл значка. Я не лучше умею программировать преобразование после прочтения вашего ответа. Когда ваш сайт когда-нибудь выйдет из строя, этот ответ будет бесполезен. Хороший ответ описал бы процесс, который использует ваш онлайн-инструмент. :)
- person snap; 04.07.2016
@vgoklani См. мой ответ ниже для значков с переменным размером.
- person eclipse; 08.09.2016
@ Пол Феррет: +1. Спасибо за отличную работу! Я только что протестировал, и он работает как шарм. Мне любопытно, как это возможно, что вы экспортировали SVG в ICO? Если не секрет, поделитесь, пожалуйста. Спасибо еще раз.
- person Viet; 02.05.2017
@Viet - это супер простой PHP-скрипт, который использует шрифт ttf, предоставляемый font awesome, вместе с магией изображений для создания значка. Очень похоже на этот код: stackoverflow.com/a/26092157/544294
- person Paul Ferrett; 03.05.2017
Спасибо, Пол! Какая отличная идея!
- person Viet; 03.05.2017
Потрясающее творение
- person Shakeel Ahmed; 08.07.2017
ЛЮБЛЮ эту реализацию!
- person Srihari Yamanoor; 09.03.2018
Хорошая реализация. К сожалению, в настоящее время одного фавикона 16x16 недостаточно. Было бы неплохо скачать zip-архив со всеми необходимыми значками всех необходимых размеров.
- person coorasse; 10.03.2018
@paul, если использовать ваш генератор, будут ли проблемы с копированием ???????????????????????
- person giveJob; 13.12.2018
Отлично. Мне нравится, как сообщества работают в целом, и я получаю такие же идеи, как ваша. Молодец,
- person Casey; 01.04.2019
Очень круто, было бы неплохо иметь возможность менять цвет значка в стопке, а также панели поиска.
- person Souleste; 06.08.2019
Это потрясающе - это помогло мне получить то, что мне нужно, 100% +1!
- person Reinstate C0MMUNiSM; 23.12.2019
офигенный микросервис!
- person Trevor Bye; 19.08.2020
Я также создал интерактивный 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. !
Если вам нужны дополнительные функции, пожалуйста, отправьте нам вопрос или запрос на перенос здесь.
person
eclipse
schedule
08.09.2016
@vgoklani Если у вас есть предложения, дайте мне знать :)
- person eclipse; 09.09.2016
@eclipse: Большое спасибо! Это избавило меня от такой боли.
- person sam; 26.11.2016
Благодарим вас за эти огромные усилия, прежде всего сделаем несколько замечаний: когда я загружаю изображение, оно всегда равно 1024 по ширине и высоте, и его следует изменить до фактического размера. второй: размер ползунка должен быть записан или, что лучше, может быть установлен в числовом поле
- person Saif; 02.01.2017
Я улучшил его поддержкой наборных значков. PR ожидает рассмотрения.
- person trung; 15.09.2017
Мне нравится функция предварительного просмотра вкладок в реальном времени!
- person Tot Zam; 11.12.2017
Я не могу понять, как использовать его с font awesome pro. Возможно, эта функция была удалена. Я только что загрузил svg и использовал realfavicongenerator.net
- person gamingexpert13; 08.04.2021
Любое изображение можно загрузить на сайт генератора значков, например
or
следуйте интерактивным инструкциям на выбранном вами сайте. Обычно это всего лишь трехэтапный процесс. Сохраните значок на верхнем уровне вашего сайта.
Для совместимости между браузерами я рекомендую всегда использовать изображения для значков. Даже если некоторые сайты, которые вы создаете, предназначены только для современных браузеров, все равно преобразуйте ваши значки в изображения. Постоянное использование одного и того же процесса избавляет вас на одну проблему.
person
otherDewi
schedule
09.08.2013
Обратите внимание, что значок не будет отображаться в Chrome, если ваш сайт является локальным, только тогда, когда вы загружаете сайт на свой веб-хост. это не правильно.
- person U r s u s; 12.02.2015
если у вас есть проблемы с отображением значка избранного локально, см. stackoverflow.com/questions/16375592 /
- person otherDewi; 01.03.2018
Font Awesome размещен на ряде популярных сетей CDN, что позволяет напрямую ссылаться на отдельные файлы SVG. Просто установите href URL элемента <link> на нужный SVG в размещенной библиотеке Font Awesome.
Пример HTML для значка закладки ракеты, размещенного на jsDelivr:
<head>
<link rel=icon href=https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/svgs/solid/rocket.svg>
</head>
Как это выглядит в Chrome: 
Ограничением этого подхода является то, что большинство браузеров не поддерживают изменение цвета или изменение каких-либо свойств стиля.
Safari поддерживает пользовательские цвета, если вы используете отношение mask-icon и атрибут color. Значок цветной закладки будет отображаться на закрепленных вкладках Safari, а также на обычных вкладках, если пользователь выбрал параметр Показывать значки веб-сайтов на вкладках.
Пример HTML для цветного значка закладки:
<head>
<link rel=mask-icon color=teal
href=https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/svgs/solid/rocket.svg>
</head>
Как это выглядит в Safari: 
Прокатитесь на ракете:
https://centerkey.com/files/rocket.html < / а>
person
Dem Pilafian
schedule
29.08.2020
Невозможно использовать прямой символ шрифта awesome в качестве значка без преобразования в изображение. Вы должны преобразовать символ в изображение ..
person
Shakeel Ahmed
schedule
27.01.2014
