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

Question

DNN 9.3.1 2 2sxc 10.25.2

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

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

但是FontAwese5(免费)有3个不同的字体前缀类: fab，far，和fas。(品牌，常规的和坚实的)。

因此，当我使用选择器选择一个图标，它没有正确的前缀图标。我希望当我选择图标时，它会添加正确的前缀，比如"fas fa-user“，但是它只输出"fa-user”，这样图标就不会出现。

我的剃须刀模板是这样的：

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

是我设置的不正确，还是2sxc图标选择器不能支持字体Awese5？我如何配置设置，以使字体Awese5工作？

Answer 1

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

针对icons

• Unfortunately，

1. Fontawesome有不同的字体文件和不同的css文件--这在选择器中会造成麻烦，因为选择器不能配置为显示带有不同前缀的图标预览--因此，从现在起，选择器通常只能配置为显示这些图标的一组
2. --在某些情况下，不同的前缀将很重要，但泡菜器不会给您提供前缀，而只给出图标名

。

我们也有另一个问题，真正困扰我们:这些图标字体真的损害了我们的谷歌页面速度评级-大约10-20分取决于情况！正因为如此，我们花了将近两周的时间来寻找更好的解决方案。我们已经找到了)。它只是没有很好的标准化/文档化。

下面是它的工作原理：

1. 基本上所有的图标都有不同的名称，所以前缀不重要。这只是一个字体的优化--太棒了，但无论如何都不好。
2. 所以我们需要一个css文件，它列出了所有的图标，但是不管使用什么前缀，只要正确使用正确的字体文件。我们可以生成这样的文件，并且已经有了一些工作脚本来实现它，但是它并不处于我们可以共享的状态：(
3. 这个css文件应该在图标选择器
4. 和页面中使用，因为前缀并不重要

我们就是这样解决这个问题的。很抱歉事情不简单。

我们更进一步:如果你拥有字体的商业许可，你可以在你的页面中使用一个JS加载程序，它根本不使用字体，但只需要得到页面中包含的3-4个SVG。这就给了我们在PageSpeed上额外的10-20分！但因为这只是商业许可，所以我不能和公众分享。如果你有商业执照，我就会这么做。