How to make font awesome icon appear when setting it in content of css

Question

Having this snippet:

.my-style {
  padding: 0;
  list-style-type: none;
}

.my-style i {
  margin-right: 5px;
}

.my-style li {
  margin-bottom: 8px;
}

.my-style li::before {
  content: '\f00c';
  display: inline-block;
  margin-left: -15px;
}

<div>
  <ul class="my-style">
    <li> This is the first line</li>
    <li> And this is the second line</li>
  </ul>
</div>

I want to put a font-awesome icon in front of each <li> and I cannot add it like <i class="far fa-close"></i> because it will break something else.

There is no icon appearing but a white square instead like this:

Is it something wrong with the content styling? There is font-awesome installed and there is a file fontawesome.css which contains this line among others:

.fa-check:before {
  content: '\f00c';
}

score 0 · Answer 1 · answered Jan 20 '23 at 12:41

Do you have the font-awesome css linked in your head?

<head>
  <link rel="stylesheet" href=
  "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.css">
  </link>
</head>

Another (ugly and hacky) thing to try would be to nest a span element inside your li

<li><span>And this is the second line<span></li>

And then change the CSS to

.my-style li>span::before {
  content: '\f00c';
  display: inline-block;
  margin-left: -15px;
}

Pete · Answer 2 · 2023-01-20T12:54:19.437

You would need to add the font family to the before so that it knows to use font awesome for the content:

.my-style {
  padding: 0;
  list-style-type: none;
  margin-left: 10px;
}

.my-style li {
  margin-bottom: 8px;
}

.my-style li::before {
  content: '\f00c';
  display: inline-block;
  margin-left: -15px;
  font-family: 'Font Awesome 6 Free';         /* all the following is what font awesome uses to style their font */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.css" />
<div>
  <ul class="my-style">
    <li> This is the first line</li>
    <li> And this is the second line</li>
  </ul>
</div>

How to make font awesome icon appear when setting it in content of css

2 Answers2