Why Does Font Awesome 5 Show Empty Squares When Using JS and SVG for Bullet Points?

Font Awesome 5 Shows Empty Square with JS SVG

When attempting to use Font Awesome 5 to replace standard bullet points in an unordered list, you may encounter an empty square instead of the desired icon. This issue can occur when using the JavaScript and SVG version of the library.

Solution

To resolve this issue, ensure you are using the latest version of Font Awesome 5 (v5.13.0 or later). This release introduces the ability to use pseudo-elements with the JS version.

To enable the use of pseudo-elements, add the data-search-pseudo-elements attribute to your JavaScript

• Summary of what you must pay attention to about Border when writing CSS
• How to realize multi-style selection and real-time switching of styles_Experience exchange
• Detailed usage analysis of marquee
• CSS标题线（删除线贯穿线效果）实现
• CSS3中优雅降级和渐进增强的区别