如何使用 FontAwesome 5 在 2sxc 中配置字体图标选择器？
How do I configure the Font Icon Picker in 2sxc with FontAwesome 5?
DNN 9.3.1
2sxc 10.25.2
我在名为 "Icon" 的 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 正常工作？
这确实很棘手。让我介绍一下背景：
- Fontawesome 有不同的字体文件和不同的 css 文件用于定位图标
- 不幸的是，这会给选择器带来麻烦，因为无法将选择器配置为显示具有不同前缀的图标预览 - 所以到目前为止，通常只能将选择器配置为显示一组这些图标
- 正如您注意到的那样，输出也出现了同样的问题 - 在某些情况下，不同的前缀很重要，但选择器不会给您前缀，只会给您图标名称
我们还有另一个真正困扰我们的问题：这些图标字体确实损害了我们的 google 页面速度评级 - 大约。 10-20分视情况而定！正因为如此，我们花了将近 2 周的时间来寻找更好的解决方案。我们找到了它:)。它只是没有很好的标准化/记录:(。
工作原理如下：
- 基本上所有图标都有不同的名称，所以前缀无关紧要。这只是 font-awesome 引入的优化，但无论如何都不好。
- 所以我们需要一个 css 文件来列出所有图标，但无论使用什么前缀都可以正确使用正确的字体文件。我们可以生成这样一个文件，并且已经有一些可以执行此操作的工作脚本，但它不处于我们可以共享的状态:(
- 此 css 文件应在图标选择器中使用
- 并且在页面中，因为前缀并不重要
这就是我们解决问题的方式。抱歉，这并不简单。
我们更进一步：如果您拥有 font-awesome 的商业许可证，您可以在您的页面中使用一个 JS 加载器，它根本不使用字体，但只获取 3-4您实际包含在页面中的 SVG。这让我们在 PageSpeed 上多了 10-20 分！但因为它只是商业许可，我不能与 public 分享。不过，如果您确实拥有商业许可证，那就是我要走的路。
DNN 9.3.1 2sxc 10.25.2
我在名为 "Icon" 的 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 正常工作？
这确实很棘手。让我介绍一下背景：
- Fontawesome 有不同的字体文件和不同的 css 文件用于定位图标
- 不幸的是，这会给选择器带来麻烦，因为无法将选择器配置为显示具有不同前缀的图标预览 - 所以到目前为止，通常只能将选择器配置为显示一组这些图标
- 正如您注意到的那样，输出也出现了同样的问题 - 在某些情况下，不同的前缀很重要，但选择器不会给您前缀，只会给您图标名称
我们还有另一个真正困扰我们的问题：这些图标字体确实损害了我们的 google 页面速度评级 - 大约。 10-20分视情况而定！正因为如此，我们花了将近 2 周的时间来寻找更好的解决方案。我们找到了它:)。它只是没有很好的标准化/记录:(。
工作原理如下：
- 基本上所有图标都有不同的名称，所以前缀无关紧要。这只是 font-awesome 引入的优化，但无论如何都不好。
- 所以我们需要一个 css 文件来列出所有图标，但无论使用什么前缀都可以正确使用正确的字体文件。我们可以生成这样一个文件，并且已经有一些可以执行此操作的工作脚本，但它不处于我们可以共享的状态:(
- 此 css 文件应在图标选择器中使用
- 并且在页面中，因为前缀并不重要
这就是我们解决问题的方式。抱歉，这并不简单。
我们更进一步：如果您拥有 font-awesome 的商业许可证，您可以在您的页面中使用一个 JS 加载器，它根本不使用字体，但只获取 3-4您实际包含在页面中的 SVG。这让我们在 PageSpeed 上多了 10-20 分！但因为它只是商业许可，我不能与 public 分享。不过，如果您确实拥有商业许可证，那就是我要走的路。