我可以在XHTML中使用FontAwesome字符作为favicon吗？

Question

我使用<h:outputStylesheet name="vendor/font-awesome/css/font-awesome.min.css" />创建了一个XHTML页面，因此它会自动加载图标，就像这个i class="fa fa-truck"

一样

我想将favicon fa-truck 添加到我的XHTML页面，我下载图标并使用它：

 <link rel="icon" type="image/x-icon" href="#{resource['icons/truck.png']}" />

但是，我正在寻找另一个没有下载图标的解决方案，我想从class="fa fa-truck"加载它。所以，我希望链接rel="icon" type="image/png"直接使用此类而无需下载或压缩或转换，就像i一样。换句话说，可以用href替换class？像这样：

有可能吗？请你帮助我好吗 ？。非常感谢。

Answer 1

不，不可能使用FontAwesome（或任何其他恰好包含图标的字体）字符作为图标。

来自W3C文档：

  

您选择的图像格式必须为16x16像素或32x32像素，使用8位或24位颜色。图像格式必须是PNG（W3C标准），GIF或ICO之一。

因此您需要将角色转换为支持的图像文件。

另见：

• https://www.w3.org/2005/10/howto-favicon
• http://caniuse.com/#search=favicon
• Font Awesome Favicon Generator

Answer 2

您可以压缩truck.png https://tinypng.com/

之后你可以转换为base64 https://www.base64-image.de

<link rel="icon" type="image/png" href="data:image/png;base64,...."/>

Answer 3

您可能想要：

• 使用您要设置为favicon的图标创建常规i。
• 将此i转换为画布，例如使用html2canvas。
• Convert the canvas to a regular img。
• 将此img设置为favicon，例如使用favicon.js。