在我的 angular 输入字段中添加很棒的字体

Question

我想在我的输入字段中添加一个很棒的字体图标，而不必使用 link 标签，因为我已经将它作为依赖项安装在我的 angular 应用程序中

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <input id="searchHymn" 
        class="form-control" type="text"
        placeholder="&#xF0b0; Filter" 
        [(ngModel)]='listFilter'>

必须将这个 link 标签添加到 font awesome 是我的问题，因为我的 app.module.ts 文件中已经有 font awesome。

如果没有给出有关使用 @imports 的答案，我会很高兴，因为它与使用 link 标签基本相同。谢谢

Answer 1

如果我没记错的话，你可以在 src/index.html 的 <head>-tag 中添加一个 <link> with your font awesome url您的 Angular 应用。该字体应该在整个应用程序中可用。

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

参见：https://www.codemeright.com/blog/post/how-to-use-font-awesome-icons-in-html

Answer 2

Font Awesome 现在有一个官方 Angular 组件，所有想要在项目中轻松使用我们的图标的人都可以使用。

使用 NPM 安装：

$ npm 安装@fortawesome/fontawesome-svg-core

$ npm 安装@fortawesome/free-solid-svg-icons

$ npm 安装@fortawesome/angular-fontawesome@

您可以查看 GitHub 或 API 文档中的 angular-fontawesome 存储库，了解更多详细信息，例如兼容性版本以及如何使用它..

参见：

https://github.com/FortAwesome/angular-fontawesome https://www.npmjs.com/package/@fortawesome/angular-fontawesome

在我的 angular 输入字段中添加很棒的字体

Adding font awesome to my angular input field

font-awesome-5

angular

angular-fontawesome