Font Awesome 5 JS SVG Showing Empty Squares: How Do I Fix It?

Font Awesome 5 Displays Empty Square with the JS SVG Version

When attempting to use the JS SVG version of Font Awesome 5 to replace list item bullet points with icons, an empty square may appear instead of the intended icon. To resolve this, enable the use of pseudo-elements in the JS version by adding the data-search-pseudo-elements attribute to the script tag.

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

To customize the icon appearance, target the SVG element using CSS:

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

For clarity, this solution is for the JS SVG version of Font Awesome 5. If you encounter this issue with the CSS version, refer to "Font Awesome 5, why css content is not showing?".

The above is the detailed content of Font Awesome 5 JS SVG Showing Empty Squares: How Do I Fix It?. For more information, please follow other related articles on the PHP Chinese website!