Font Awesome icon not showing, but other do-CodePudding

I've seen a lot of people with this problem, but they all had different solutions but none has worked for me. I've tried changing "fa" to "fas" and "fab", I've imported a bunch of CDNs, files, all.css, links and none worked. But it works for some icons. For example, this one works:

<i ></i>

but this one doesn't:

<i ></i>

How can I solve this?

I've tried changing "fa" to "fas" and "fab", I've imported a bunch of CDNs, files, all.css, links and none worked. But it works for some icons. For example, this one works:

<i ></i>

but this one doesn't:

<i ></i>

How can I solve this?

CodePudding user response：

The fill after the icon name is a bootstrap thing but you need to change the fa or fas to bi

see the available icons for bootstrap and font-awesome

here is how you can use both font awesome and bootstrap icons:

<!--  Font Awesome cdn -->
<link rel="stylesheet" 
 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">


<!--  Bootstrap cdn -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">


 
<h5>font awesome Icon :</h5>
<i ></i>

<h5>Bootstrap Icon :</h5>
<i ></i>

CodePudding user response：

You do not need the "fill" as part of the name -the "FAS" prefix stands for "Font Awesome SOLID" - so its filled in by default

<!--  Font Awesome cdn -->
<link rel="stylesheet" 
 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
 
 <p>fas fa-scissors</p>
<i ></i>

<p>fas fa-person</p>
<i ></i>