如何使用 FontAwesome 5 在 2sxc 中配置字体图标选择器？

Question

DNN 9.3.1 2sxc 10.25.2

我在 2sxc 内容模块中添加了一个名为“图标”的字段，并将其设为字体图标选择器。我的 DNN 皮肤通过 CSS 中的 CDN 加载了 FontAwesome 5。

查看 2sxc 字体图标选择器字段设置，它需要 CSS 前缀、预览 CSS 类和字体文件。 （我从 CDN 获得了 FontAwesome 5 图标，但我知道我需要在本地引用它们 - 所以我下载了 Font Awesome 5 并将其上传到我的服务器并在那里引用它）。

但 Font Awesome 5（免费）有 3 个不同的字体前缀类：fab、far 和 fas。 （品牌、常规和实体）。

因此，当我使用选择器选择图标时，它不会正确地为图标添加前缀。我希望当我选择图标时，它会添加正确的前缀，例如“fas fa-user”，但它只输出“fa-user”，因此图标不会出现。

我的剃须刀模板如下所示：

<i class="@Content.IconPicker"></i>

是我设置错误还是 2sxc Icon Picker 不支持 Font Awesome 5？如何配置设置以使 Font Awesome 5 正常工作？

Answer 1

这确实很棘手。让我介绍一些背景：

1. Fontawesome 有不同的字体文件和不同的 css 文件来定位图标
2. 不幸的是，这会导致选择器出现问题，因为无法将选择器配置为显示具有不同前缀的图标预览 - 所以到目前为止，选择器通常只能配置为显示其中一组图标
3. 您注意到的输出出现了同样的问题 - 在某些情况下，不同的前缀很重要，但选择器不会给您前缀，只是图标名称

我们还有另一个真正困扰我们的问题：这些图标字体确实损害了我们的谷歌页面速度评级 - 大约。 10-20分视情况而定！因此，我们花了将近 2 周的时间来寻找更好的解决方案。我们已经找到了:)。它只是没有很好的标准化/记录:(。

它是这样工作的：

1. 基本上所有图标都有不同的名称，所以前缀无关紧要。这只是 font-awesome 引入的优化，但无论如何都不好。
2. 所以我们需要一个列出所有图标的 css 文件，但无论使用什么前缀，都必须正确使用正确的字体文件。我们可以生成这样一个文件，并且已经有一些工作脚本可以做到这一点，但它不是我们可以共享的状态:(
3. 然后应该在图标选择器中使用此 css 文件
4. 在页面中，因为那样前缀就没有关系了

我们就是这样解决它的。抱歉，这并不简单。

我们更进一步：如果您拥有 font-awesome 的商业许可，您可以在您的页面中使用 JS 加载器，它根本不使用字体，而只是获取 3-4 个 SVG '实际上包括在页面中。这给了我们在 PageSpeed 上的额外 10-20 分！但因为它只是商业许可，我不能与公众分享。如果你确实有商业许可证，那就是我要走的路。