[英]Symfony 5 can't use Font Awesome icons
I am trying to import Font Awesome into my Symfony 5 with Webpack Encore project but I can't.我正在尝试使用 Webpack Encore 项目将 Font Awesome 导入我的 Symfony 5 但我不能。 I have read all the (most of them) SO questions , framework tutorials, etc. but none of the icons are being displayed.
我已经阅读了所有(大部分) SO问题、框架教程等,但没有显示任何图标。
yarn watch
yarn watch
变化yarn add --dev @fortawesome/fontawesome-free
yarn add --dev @fortawesome/fontawesome-free
app.css
file ( assets/css/app.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';
<i class="fas fa-star"></i>
( I also tried to prepend the icon with fa fa-star
, according to Font Awesome documentation .<i class="fas fa-star"></i>
(根据Font Awesome 文档,我还尝试在图标前添加fa fa-star
。yarn watch
yarn watch
变化yarn add --dev @fortawesome/fontawesome-free
yarn add --dev @fortawesome/fontawesome-free
app.js
file ( assets/js/app.js
):app.js
文件( assets/js/app.js
):import '~@fortawesome/fontawesome-free/css/all.min.css';
import '~@fortawesome/fontawesome-free/js/all.js';
assets/css/app.css
) (and also in JS file):assets/css/app.css
)(以及 JS 文件中):@import '~@fortawesome/fontawesome-free/css/solid.css';
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
I also have tried using CSS unicode:我也尝试过使用 CSS unicode:
element {
content: "\f005"
}
None of them displays any icon, or any console error, warning, message, or anything, but I get an empty icon every time.它们都没有显示任何图标,或任何控制台错误、警告、消息或任何东西,但我每次都得到一个空图标。 Any clues?
有什么线索吗?
Your first attempt is the right way, you just missed setting the $fa-font-path
correctly.您的第一次尝试是正确的方法,您只是错过了正确设置
$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';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.