Why Are My Font Awesome 5 Icons Showing as Empty Squares, and How Can I Fix It?

Empty Squares in Font Awesome 5 JS SVG Version: Root Cause Revealed

Attempts to incorporate Font Awesome icons into list items via the JS SVG version have resulted in empty squares for some users. This issue stems from the library's reliance on pseudo-elements.

Resolving the Issue with Pseudo-Elements

With the latest release of Font Awesome 5, you can enable pseudo-element usage by incorporating the "data-search-pseudo-elements" attribute. This instructs the library to search for pseudo-elements in the CSS.

Revised Code Snippet

To implement this solution, modify your code as follows:

ul {
  list-style: none;
}

.testitems {
  line-height: 2em;
}

.testitems:before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  display: none;
}

.testitems svg {
  color: blue;
  margin: 0 5px 0 -15px;
}

<script data-search-pseudo-elements src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script>

<ul>
  <li class="testitems">List Item 1</li>
  <li class="testitems">List Item 2</li>
  <li class="testitems">List Item 3</li>
  <li class="testitems">List Item 4</li>
  <li class="testitems">List Item 5</li>
</ul>

This revised code hides the pseudo-element and targets the SVG for styling, enabling the proper display of icons.

The above is the detailed content of Why Are My Font Awesome 5 Icons Showing as Empty Squares, and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!