Font Awesome 5 听未知图标答案

【问题标题】：Font awesome 5 listen for unknown iconsFont Awesome 5 听未知图标
【发布时间】：2019-01-24 13:02:31
【问题描述】：

我在我的网站上使用 font awesome 5。假设我拼错了这样的图标：

<i class="fa fa-map-markerzzzz"></i>

Font Awesome 代码在显示时必须检测到它是一个未知图标吗？和！符号。

知道我该如何收听吗？我想添加错误报告。我们有一个错误记录系统，我想为每个损坏的图标发送一个错误。

有什么办法吗？

【问题讨论】：

它并没有完全“倾听”这一点，只是没有匹配的 CSS 类与 fa-map-markerzzzz 匹配。 Font-Awesome 使用 .fa-map-marker:after { content:"\charcode"; 将 css 类映射到字符}`。但是，您可以创建所有现有类的列表并编写一些简单的算法来找到最接近的匹配项并用它替换无效的类名。
<i class="icon-lock" title="This symbolizes your being locked inside"></i>
[stackoverflow.com/questions/11746619/…

标签： css font-awesome-5

【解决方案1】：

FontAwesome 并没有检测到这一点，因为它是由字体文件支持的 CSS 类的集合，而不是一段代码。因此，很遗憾没有可以监听的错误事件。

一个类似的问题has been asked before，虽然不是针对 FontAwesome。看来您最好的办法是检索现有 FontAwesome 类的列表，然后将它们与您的代码中使用的类进行比较。

如果您使用 Angular 或 React，您可以将 FontAwesome 图标包装在组件中并在那里进行错误检查。

【讨论】：

【解决方案2】：

你可以这样做：

<style>
.fa:before {
  content:"?"; /*if the content exist it will be replaced later, if not you will see this*/
}

</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" >
<i class="fa fa-map-markerzzzz"></i>
<i class="fa fa-user"></i>

【讨论】：

谢谢。我实际上正在寻找一个我们不必手动查看的系统。 Font Awesome 已经在有错字的地方显示了一个通知图标。我正在寻找一个系统来为他们进行全站点扫描。