Font Awesome 图标无法显示问题

Question

我尝试使用 font-awesome 图标，但有些图标可以显示，有些不能显示。它给了我这个错误：

我的用法：

<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>

Answer 1

class 名称不是 far fa fa-check-circle-o。

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

Answer 2

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

的 CDN

字体真棒版本 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>

Font Awesome 图标无法显示问题

Font Awesome icon couldn't show issue

twitter-bootstrap

font-awesome

bootstrap-4