How to include font-awesome icons with CSS only?

Question

I want to create "tags" with CSS with font-awesome icons on left side of each tag, here's my code (that's not rendering properly with the font-awesome icon)

.tags {
  list-style: none;
  margin: 0;
  overflow: hidden; 
  padding: 0;
}

.tags li {
  float: left; 
}

.tag {
  font: 12px/1.5 'PT Sans', serif;
  background: #305e91;;
  border-radius: 3px 0 0 3px;
  color: white;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 20px 0 23px;
  position: relative;
  margin: 0 2px 5px 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
}
.tag:hover {
  background-color: #3399ff;
  color: white;
}

.tag:hover::after {
   border-left-color: #3399ff; 
}
.containerOfTags{
  /*height: auto;*/
  width:260px;
  height:auto;
  border:1px solid #321fdb; padding:2px;
  max-height: 100px;
  overflow: auto;
  padding:5px 5px 5px 5px;
}

.tag::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 6 Free"; 
  font-weight: 400; 
  content: "\f02c";// this the unicode of the fontawesome icon i want to add (not working here)

  height: 6px;
  left: 8px;
  position: absolute;
  width: 6px;

}

<div class="containerOfTags">       
    <ul class="tags">
        <li class="tag">HTML</li>
        <li class="tag">CSS</li>
        <li class="tag">JavaScript</li>
        <li class="tag">HTML</li>
        <li class="tag">CSS</li>
        <li class="tag">JavaScript</li>
        <li class="tag">HTML</li>
        <li class="tag">CSS</li>
        <li class="tag">JavaScript</li>
        <li class="tag">HTML</li>
        <li class="tag">CSS</li>
        <li class="tag">JavaScript</li>
        <li class="tag">HTML</li>
        <li class="tag">CSS</li>
        <li class="tag">JavaScript</li>
        <li class="tag">HTML</li>
        <li class="tag">CSS</li>
        <li class="tag">JavaScript</li>
        <li class="tag">HTML</li>
        <li class="tag">CSS</li>
        <li class="tag">JavaScript</li>
    </ul>
</div>

as mentioned, the icon is not showing properly but rather a square is showing, any idea how to include font awesome icons with CSS only ? to note that of course i included the all.css required for the styling.

[These are the docs](https://fontawesome.com/v6/docs/web/setup/upgrade/pseudo-elements) for CSS pseudo element icons in V6, there have been some changes since V5 that may be relevant. — DBS, Jul 08 '22 at 08:43
"We've made sure that Version 4 and Version 5 icon unicode values map to the proper icon in Version 6." so unicode should be the same — SSSOF, Jul 08 '22 at 08:50
Edit: sorry, 900 is the free version: https://jsfiddle.net/astombaugh/87scbo2w/1/, 400 is the regular which is pro — AStombaugh, Jul 08 '22 at 08:53

score 0 · Answer 1 · answered Jul 08 '22 at 09:09

Icon was not displaying because you have not included font-awesome. See the snippet below it is working after adding font-awesome kit.

.tags {
  list-style: none;
  margin: 0;
  overflow: hidden; 
  padding: 0;
}

.tags li {
  float: left; 
}

.tag {
  font: 12px/1.5 'PT Sans', serif;
  background: #305e91;;
  border-radius: 3px 0 0 3px;
  color: white;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 20px 0 23px;
  position: relative;
  margin: 0 2px 5px 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
}
.tag:hover {
  background-color: #3399ff;
  color: white;
}

.tag:hover::after {
   border-left-color: #3399ff; 
}
.containerOfTags{
  /*height: auto;*/
  width:260px;
  height:auto;
  border:1px solid #321fdb; padding:2px;
  max-height: 100px;
  overflow: auto;
  padding:5px 5px 5px 5px;
}

.tag::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 6 Free"; 
  font-weight: 400; 
  content: "\f02c";
  height: 6px;
  left: 8px;
  position: absolute;
  width: 6px;

}

<script src="https://kit.fontawesome.com/d622075261.js" crossorigin="anonymous"></script>
<div class="containerOfTags">       
    <ul class="tags">
        <li class="tag">HTML</li>
        <li class="tag">CSS</li>
        <li class="tag">JavaScript</li>
        <li class="tag">HTML</li>
        <li class="tag">CSS</li>
        <li class="tag">JavaScript</li>
        <li class="tag">HTML</li>
        <li class="tag">CSS</li>
        <li class="tag">JavaScript</li>
        <li class="tag">HTML</li>
        <li class="tag">CSS</li>
        <li class="tag">JavaScript</li>
        <li class="tag">HTML</li>
        <li class="tag">CSS</li>
        <li class="tag">JavaScript</li>
        <li class="tag">HTML</li>
        <li class="tag">CSS</li>
        <li class="tag">JavaScript</li>
        <li class="tag">HTML</li>
        <li class="tag">CSS</li>
        <li class="tag">JavaScript</li>
    </ul>
</div>

How to include font-awesome icons with CSS only?

1 Answers1