真棒字体图标无法显示问题答案

【问题标题】：Font Awesome icon couldn't show issue真棒字体图标无法显示问题
【发布时间】：2021-10-16 10:27:05
【问题描述】：

我尝试使用字体很棒的图标，但有些图标显示而其他图标无法显示。它给了我这个错误：

我的用法：

<html>
<head>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" crossorigin="anonymous">

    <!-- Load font awesome icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
</head>
...
some codes
...
</html>
<script>
...some code...
...
...
display data table: 
"data": null,
 "render": function (data, type, row)
           {
           if (row.detailPhysicalPath == "") {
         return '<button  id="' + row.staffCode+ '" onclick="captureClick(this)" type="button" class="btn btn-primary"><i class="far fa fa-camera"></i></button>';}
           else {
                return '<button  id="' + row.staffCode+ '" onclick="captureClick(this)" type="button" class="btn btn-primary"><i class="far fa fa-check-circle-o"></i></button>';}
             }
</script>

【问题讨论】：

标签： twitter-bootstrap bootstrap-4 font-awesome

【解决方案1】：

这里的问题是您使用的字体真棒图标名称是版本 4，并且您已经包含了字体 awsome 版本 5 的 CDN

Font Awesome 版本 5：<i class="far fa-check-circle"></i>

示例：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">

<i class="far fa-check-circle"></i>

Font Awesome 第 4 版：<i class="fa fa-check-circle-o" aria-hidden="true"></i>

示例：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />

<i class="fa fa-check-circle-o" aria-hidden="true"></i>

【讨论】：

【解决方案2】：

类名不是far fa fa-check-circle-o。

正确的名字是fa fa-check-circle-o。

【讨论】：