如何在本地Sass项目中安装Font Awesome？

阿华AIGC实验室

2026-5-15

本地安装Font Awesome到简易Sass项目

当然可以把Font Awesome本地安装到你的简易Sass项目里！我来一步步帮你搞定，解决图标显示方框的问题~

第一步：下载并放置Font Awesome本地包

先去Font Awesome官网下载完整的压缩包，解压后你会看到scss、webfonts（旧版本可能是fonts）、svgs这些关键文件夹。
把整个解压后的文件夹（比如叫fontawesome-free-6.x.x）放到你的项目目录里，比如项目根目录下的libs或者vendor文件夹，方便后续引用。

第二步：在Sass文件中导入Font Awesome样式

打开你的主Sass文件（比如style.scss），按需导入Font Awesome的核心和图标样式。举个例子，如果你的Font Awesome文件夹在libs/fontawesome-free-6.x.x，导入代码大概是这样：

// 先设置路径（这步很重要，后面讲）
$fa-font-path: '../libs/fontawesome-free-6.x.x/webfonts';

// 导入核心样式和你需要的图标库
@import '../libs/fontawesome-free-6.x.x/scss/fontawesome';
@import '../libs/fontawesome-free-6.x.x/scss/solid'; // 实心图标，按需加regular、brands等

第三步：解决图标显示方框的核心问题——路径配置

你看到的方框，本质是CSS找不到对应的字体或SVG文件，所以必须提前设置正确的资源路径：

Web Font模式（默认）：设置$fa-font-path，这个路径是相对于最终生成的CSS文件的位置，不是相对于你的Sass文件哦！比如你的Sass在src/scss/style.scss，编译后的CSS在dist/css/style.css，那webfonts相对于dist/css的路径就是../../libs/fontawesome-free-6.x.x/webfonts，要根据你的项目结构调整。

SVG模式（更推荐现代项目）：如果想用SVG图标，就设置$fa-icons-path并导入SVG核心样式：

$fa-icons-path: '../libs/fontawesome-free-6.x.x/svgs';
@import '../libs/fontawesome-free-6.x.x/scss/fontawesome';
@import '../libs/fontawesome-free-6.x.x/scss/svg-core';
@import '../libs/fontawesome-free-6.x.x/scss/solid';