如何以标准 SCSS 方式基于字体的图标使用 @fortawesome/fontawesome 进行 angular

如何解决如何以标准 SCSS 方式基于字体的图标使用 @fortawesome/fontawesome 进行 angular

最近我使用安装程序提供的免费品牌 svg 图标、常规 svg 图标和实心 svg 图标为 Angular 11 项目安装了 npm packages 0.8 版，但它没有显示基于字体的图标选项进行安装。但是，除了将这些图标用作模块之外，我还希望以标准方式使用它们，例如：<span class="fas fa-chevron-left"></span> 以在 Telerik 组件中使用，例如：

export const items = {
    parents: [
        {
            text: 'Seguridad',icon: 'fa fa-shield',expanded: false,children: true,selected: false
        },

fortawesome 安装的唯一 css 文件是 fontawesome-svg-core 文件夹下的 style.css，不包含图标。

作为一种解决方法，我还以这种方式安装了 fontawesome：

npm install font-awesome –save

然后，我将 scss 引用添加到 style.scss 文件中，但这会复制库。

我怎样才能通过 fortawesome 实现这一目标？

谢谢

解决方法

我使用了模块化方法安装/配置字体 awesome，但没有尝试使用 CSS 方法。我已经将 CSS 方法用于引导程序主题，因此一个建议是将样式添加到 style.scss 中，如下所示：

@import "/path-to-fontawesome/css/fontawesome.css";

然后确保您的样式在 Angular.json 中：

"styles": [
    "src/styles.scss"
],

如果样式干扰了 font awesome 模块的安装，则卸载 font awesome 包并尝试此方法并查看图标是否显示。