Font-Awesome 5结合SASS使用时图标显示FL而非放大镜问题求助

Hey, let's sort out that weird "fl" showing up instead of your search icon. The core issue is a mix-up between Font Awesome's icon style classes—here's how to fix it step by step:

1. Correct the Icon Style Extension #

You're using @extend .fab which is for Brand icons (like Twitter, GitHub), but the search icon belongs to the Solid style (.fas). Swap that out, and that alone should fix the display issue:

@import "./scss/fontawesome.scss";
@import "./scss/fa-solid.scss";

.test{
 width: 200px;
 height: 200px;
 background: purple;
 position: relative; /* Optional but helps position the icon neatly */
}

.test:before{
 @include fa-icon;
 @extend .fas; /* Changed from .fab to .fas for Solid style icons */
 content: fa-content($fa-var-search);
 font-size: 24px;
 color: #FFF;
 /* Optional: Center the icon inside the .test box */
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

2. Double-Check Key Configurations #

If the issue persists after fixing the style class, verify these details:

• Font Path: Confirm _variables.scss has $fa-font-path set to the correct relative path to your webfonts folder (e.g., ../webfonts/—make sure this matches your project's file structure).
• Font Files: Ensure all required Solid style font files exist in your webfonts directory (like fa-solid-900.woff2, fa-solid-900.ttf). Missing or misnamed files will break icon rendering.
• Font Weight: The Solid style requires font-weight: 900—luckily, the .fas class already includes this, so using @extend .fas handles this automatically.

内容的提问来源于stack exchange，提问作者Elcid_91