Font Awesome同Unicode的file-lines图标如何在CSS中指定regular版本？

我需要使用Font Awesome的「file-lines」regular版本图标，但该图标和solid版本的Unicode均为\f15c，且两个版本都是免费图标。当前我的CSS和HTML代码如下：

当前代码 #

CSS #

.menu-nav a::before {
    font-size: 16px;
    line-height: 0;
    content: '\f15c';
    font-family: 'FontAwesome';
    padding-right: 8px;
    font-weight: 400;
}

HTML #

<div class="menu-nav">
<a href="">Link 01</a>
</div>

解决方案 #

要指定使用regular版本，核心是通过字体族和字重的组合来区分变体，以下是两种可行方法：

• 方法1：调整CSS的字体族与字重
  Font Awesome 5+版本中，免费版的regular图标对应字体族为"Font Awesome 6 Free"（根据你实际使用的版本号调整，比如v5就是"Font Awesome 5 Free"），同时regular版本的固定字重为400（solid版本为900）。修改后的CSS如下：

.menu-nav a::before {
    font-size: 16px;
    line-height: 0;
    content: '\f15c';
    /* 对应Free版regular字体族，版本号按需调整 */
    font-family: "Font Awesome 6 Free";
    padding-right: 8px;
    /* regular版本固定使用400字重 */
    font-weight: 400;
}

• 方法2：直接使用类名（更直观）
  放弃伪元素的content写法，直接在HTML中添加Font Awesome的类名，避免手动处理Unicode和字重：

<div class="menu-nav">
<a href=""><i class="fa-regular fa-file-lines"></i> Link 01</a>
</div>

此时可移除之前伪元素的CSS代码，或单独给.fa-file-lines设置大小、间距样式。

关键说明 #

Font Awesome免费版中，regular变体的字重固定为400，solid变体为900，只要确保字体族指向正确的Free版本字体，同时设置对应字重，就能准确切换到regular版本图标。

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