字体很棒的圈子没有出现

Question

in my package.json, I have

 "dependencies": {
    "font-awesome": "^4.7.0"
  }

in my html, I have

<link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

If I comment out the second link, none of my font-awesome icons show up and I only get empty rectangles.

in my css, I have

fas fa-circle

Anyone seeing what I am doing wrong?

Answer 1

This is for version 5 and above

In your HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

Then, Use this code

<span><i class="fas fa-circle"></i></span> // for Solid
<span><i class="far fa-circle"></i></span> // for Regular

And, This is for version 4.7.0

In your HTML,

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Then,

<span><i class="fa fa-circle-thin" aria-hidden="true"></i></span>
<span><i class="fa fa-circle" aria-hidden="true"></i></span>
<span><i class="fa fa-circle-o" aria-hidden="true"></i></span>

Answer 2

for version 4.7.0 installed locally, I should use fa instead of fas.

    <link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.css">

and the package is

    "font-awesome": "^4.7.0"