Symfony 5 无法使用 Font Awesome 图标

Posted 2023-02-24

【中文标题】Symfony 5 无法使用 Font Awesome 图标

【英文标题】：Symfony 5 can't use Font Awesome icons

【发布时间】：2020-09-20 12:41:07

【问题描述】：

我正在尝试使用 Webpack Encore 项目将 Font Awesome 导入到我的 Symfony 5 中，但我不能。我已经阅读了所有（大部分）S.O questions、框架教程等，但没有显示任何图标。

我遵循的步骤：

第一次尝试：

编译资产并使用yarn watch 观察变化 免费安装 Font Awesome：yarn add --dev @fortawesome/fontawesome-free 将 CSS 文件导入app.css 文件 (assets/css/app.css)：

@import '~@fortawesome/fontawesome-free/css/fontawesome.css';
@import '~@fortawesome/fontawesome-free/css/regular.css';
@import '~@fortawesome/fontawesome-free/css/solid.css';
@import '~@fortawesome/fontawesome-free/css/brands.css';

将图标添加到 TWIG 模板：<i class="fas fa-star"></i>（根据Font Awesome documentation，我还尝试在图标前面加上fa fa-star。

第二次尝试：

编译资产并使用yarn watch 观察变化 免费安装 Font Awesome：yarn add --dev @fortawesome/fontawesome-free 将 CSS / JS 文件导入app.js 文件（assets/js/app.js）：

import '~@fortawesome/fontawesome-free/css/all.min.css';
import '~@fortawesome/fontawesome-free/js/all.js';

将 Solid Font Awesome 图标导入 CSS 文件 (assets/css/app.css)（以及 JS 文件）：

@import '~@fortawesome/fontawesome-free/css/solid.css';

将图标添加到 TWIG 模板：<i class="fas fa-star"></i>

我也尝试过使用 CSS unicode：

element 
    content: "\f005" 

它们都不显示任何图标，或任何控制台错误、警告、消息或任何东西，但我每次都得到一个空图标。有什么线索吗？

【问题讨论】：

添加到css font-family: FontAwesome;

【参考方案1】：

您的第一次尝试是正确的方法，您只是错过了正确设置$fa-font-path。

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/brands';

【讨论】：

我必须使用 Sass 而不是 CSS。有效。谢谢。