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

Question

DNN 9.3.12sxc 10.25.2

我在2sxc内容模块中添加了一个名为“ Icon”的字段，并使其成为字体图标选择器。我的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不支持Awesome 5字体？如何配置设置以使Font Awesome 5正常工作？

Answer 1

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

1. Fontawesome具有不同的字体文件和不同的css文件来定位图标
2. 不幸的是，这会在选择器中引起麻烦，因为无法将选择器配置为显示带有不同前缀的图标预览-因此，到目前为止，通常只能将选择器配置为显示其中的一组图标
3. 与您注意到的一样，输出也会出现相同的问题-在某些情况下，其他前缀会很重要，但是选择器不会为您提供前缀，只是图标名

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

这是它的工作方式：

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

这就是我们正在解决的方式。抱歉，这并不简单。

我们将走得更远：如果您拥有真棒字体的商业许可证，则可以在页面中使用JS加载器，该加载器根本不使用字体，而只需要获得3-4个SVG实际包含在页面中。这使我们在PageSpeed上额外获得了10-20分！但是，因为它仅是商业许可证，所以我不能与公众分享。如果您确实拥有商业许可证，那将是我的选择。