Why Are Font Awesome 5 SVG List Item Bullets Showing as Empty Squares?

Font Awesome 5 Shows Empty Square when Using the JS SVG Version

When attempting to use Font Awesome 5 with the JS SVG version, users may encounter an issue where list item bullets are rendered as empty squares. This problem arises from the fact that Font Awesome 5 disables pseudo-element support by default.

Solution

To enable pseudo-element support for the JS version of Font Awesome 5, add 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>

Additionally, it's crucial to style the SVG elements within the pseudo-elements:

.testitems:before {
  content: "\f058";
  display: none;
}

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

By following these steps, users can seamlessly integrate Font Awesome 5 with pseudo-elements in their JavaScript applications.

The above is the detailed content of Why Are Font Awesome 5 SVG List Item Bullets Showing as Empty Squares?. For more information, please follow other related articles on the PHP Chinese website!