Font Awesome部分图标无法显示、触发报错问题求助

错误1：资源引入格式错误&重复引入 #

你当前的引入代码存在两个问题：

• 将.js格式的Font Awesome资源错误使用link rel="stylesheet"标签引入，浏览器会把JS资源当做CSS解析，直接触发控制台的MIME类型不匹配报错
• 同时引入了CSS版和JS版的Font Awesome 5资源，二者功能重叠会产生冲突，只需保留其中一个即可

修正后的引入代码（以保留CSS版为例，不需要用到JS版功能的话更推荐这个）：

<head>
    <!-- 仅保留CSS版Font Awesome引入即可 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
</head>

如果需要使用JS版的功能，把JS引入的标签改成正确的script标签即可，同时删掉CSS版引入：

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" crossorigin="anonymous"></script>
</head>

错误2：图标类名书写错误 #

你当前的图标类名存在两个不符合Font Awesome 5规范的问题：

• 重复添加了fa前缀：Font Awesome 5的类名规则为「风格前缀 + 图标类名」，比如regular风格的图标只需要写far fa-xxx，不需要额外多加一个fa
• 使用了Font Awesome 4的废弃类名：fa-check-circle-o是Font Awesome 4的空心勾选图标类名，在Font Awesome 5中该图标对应的regular风格类名为fa-check-circle

修正后的表格渲染代码：

"render": function (data, type, row) {
    if (row.detailPhysicalPath == "") {
        // 去掉多余的fa前缀
        return '<button  id="' + row.staffCode+ '" onclick="captureClick(this)" type="button" class="btn btn-primary"><i class="far fa-camera"></i></button>';
    } else {
        // 替换为FA5的合法类名，去掉多余fa前缀
        return '<button  id="' + row.staffCode+ '" onclick="captureClick(this)" type="button" class="btn btn-primary"><i class="far fa-check-circle"></i></button>';
    }
}

内容的提问来源于stack exchange，提问作者hkyaaa