CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4font-awesome
hkyaaa
hkyaaa

Reputation: 100

Font Awesome icon couldn't show issue

I tried to using font-awesome icons but some icons show and others couldnt show. It gave me this error:

enter image description here

my usage :

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

Upvotes: 0

Views: 87

Answers (2)

Sarvesh
Sarvesh

Reputation: 96

The class name isn't far fa fa-check-circle-o.

The correct name is fa fa-check-circle-o.

Upvotes: 0

Amal nandan
Amal nandan

Reputation: 942

Here the problem is the font awesome icon name that your using is version 4, and You have included CDN of font awsome version 5

Font Awesome Version 5 : <i class="far fa-check-circle"></i>

Example:

<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 Version 4 : <i class="fa fa-check-circle-o" aria-hidden="true"></i>

Example:

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

Upvotes: 2

Related Questions