在我的角度输入栏中添加很棒的字体

编程问答 2022-07-24

问题描述

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

<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'>

由于我的app.module.ts文件中已经有超棒的字体，因此必须将链接标签添加到超棒的字体是我的问题。

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

解决方法

Font Awesome现在拥有一个正式的Angular组件，可供所有希望在项目中轻松使用我们图标的人使用。

使用NPM安装：

$ npm install @ fortawesome / fontawesome-svg-core

$ npm install @ fortawesome / free-solid-svg-icons

$ npm install @ fortawesome / angular-fontawesome @

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

请参阅：

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

,

如果我没记错的话，可以在Angular应用程序的src / index.html的<link>-标签中添加带有真棒URL的<head>。字体应该在整个应用中都可用。

    <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

angularangularangular-fontawesomefont-awesome-5