0

I am trying to put a FontAwesome icon by css but whatever I do it keeps showing a blank rectangular thing.

I have checked all.css and the file is well connected. I have no idea what I did wrong. Please give me advice on this.

<head>
  <meta charset="utf-8">
  <title></title>

  <link rel="stylesheet" href="css/all.css"> <!--well connected-->

  <style>
    h1 {
      font-size: 20px;
    }
    h1::before {
      content: "\f053";
      font-family: FontAwesome;
      font-style: normal;
      font-weight: normal;
    }
  </style>
</head>

<body>
  <h1>arrow</h1>
</body>
Ainsof26
  • 9
  • 3

1 Answers1

0

if you are seeing blank square that means your font-awesome font style is not added to DOM. Check if your all.css file have import statement, if it does contain any import statement you need to either provide full fontawesome cdn path or you can download all those file and add to to same level as all.css.

This happened to me once, the import statements have relative path and i have saved the all.css to my local system so the relative path was invalid.

  • I'm not quite sure I understand what you're saying (sorry I'm just a beginner) but as far as I know all the import statements in 'all.css' are about font files and I have already put all the font files downloaded from FontAwesome site like eot, woff, ttf kind of things in the right directory. – Ainsof26 Aug 01 '20 at 07:40
  • And also the tag with the icon in HTML works well. That's why this is more confusing to me. – Ainsof26 Aug 01 '20 at 07:44
  • Oh, I still don't know why but I just tried providing cdn path and it just worked. I'm half happy and still half wondering why the hard css and font files in my hard drive didn't work. – Ainsof26 Aug 01 '20 at 07:50
  • May be you did not downloaded all the required files or you may have not put the files in right directory. –  Aug 04 '20 at 10:12