Why am I unable to see my Font Awesome icon?-CodePudding

<link rel="stylesheet" href=b oxwebpage.css>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/fontawesome.css" />
<div >
  <i ></i>
</div>

I have no idea how to fix it just shows empty box?

CodePudding user response：

Use the following cdn and remove regular from class:

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

CodePudding user response：

<i ></i> is a pro icon, so if you don't have a subscription with FA then it's not going to display for you even if you try to use a different CDN (it'll show an X or nothing at all)

https://fontawesome.com/icons/info?s=regular

I switched it out with solid, they basically look the same but if you absolutely have to have the pro version then you'll have to shell out for it: https://fontawesome.com/plans

<link rel="stylesheet" href=b oxwebpage.css>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div >
  <i ></i>
</div>

You could also cheat it by adding a -webkit-text-stroke: 1px black; (FA icons can be treated as classes) but it's a non-standard feature according to MDN but I think the only people you'll be leaving out are IE users

.fa-info {
  font-size: 20px;
  -webkit-text-stroke: 1px black;
}

<link rel="stylesheet" href=boxwebpage.css>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div >
  <i ></i>
</div>