我可以在 XHTML 中使用 FontAwesome 字符作为网站图标吗？答案

【问题标题】：Can I use a FontAwesome character as favicon in XHTML?我可以在 XHTML 中使用 FontAwesome 字符作为网站图标吗？
【发布时间】：2017-10-09 19:07:42
【问题描述】：

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

我想将图标 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 吗？像这样：

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

【问题讨论】：

如果您不喜欢最新版本的 FontAwsome，您可以使用 Primefaces 中内置的 FontAwsome 版本。目前Primefaces-6.1 附带FontAwsome-4.6.1。您可以通过在您的web.xml 处将context-param primefaces.FONT_AWESOME 设置为true 来启用此功能
您好@KishorPrakash，感谢您的回复。我添加到 web.xml <context-param> <param-name>primefaces.FONT_AWESOME</param-name> <param-value>true</param-value> </context-param> 并添加到我的 XHTML <link rel="icon" type="image/x-icon" class="fa fa-truck"/> 但图标不会改变，你能帮帮我吗？非常感谢。
Use Font Awesome Icon As Favicon的可能重复

标签： html jsf font-awesome favicon

【解决方案1】：

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

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

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

【讨论】：

您好 @moon93 先生，感谢您的回复，但似乎我无法描述我的问题。我使用 <h:outputStylesheet name="vendor/font-awesome/css/font-awesome.min.css" /> 创建了一个 XHTML 页面，因此它会自动加载图标，就像 <i class="fa fa-truck"></i> 的情况一样。现在，我希望<link rel="icon" type="image/png" 直接使用此类，无需下载、压缩或转换，就像<i /> 一样。换句话说，可以将 href 替换为 class 吗？你有什么想法吗。非常感谢。

【解决方案2】：

不，不能将 FontAwesome（或任何其他碰巧包含图标的字体）字符用作网站图标。

来自 W3C 文档：

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

所以你需要将字符转换为支持的图像文件。

另见：

【讨论】：

【解决方案3】：

您可能想要：

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

【讨论】：