Adding font awesome to my angular input field

670 Views Asked by Bukoye At 20 October 2024 at 08:38

I would like to add a font awesome icon to my input field without having to use a link tag since I've already had it installed as a dependency in my angular app

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

Having to add this link tag to font awesome is my problem since i already have font awesome on my app.module.ts file.

I'll be glad if answers relating to using @imports is not given since it is basically the same as using link tag. Thanks.

Original Q&A

There are 2 best solutions below

mohamed zerdan On 16 September 2020 at 17:58 BEST ANSWER

Font Awesome now has an official Angular component that’s available for all who want to easily use our icons in projects.

Installation using NPM :

$ npm install @fortawesome/fontawesome-svg-core

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

$ npm install @fortawesome/angular-fontawesome@

you can check angular-fontawesome repositories in GitHub or API docs for more details like compatibility version and how to use it..

See :

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

AverageProgrammer On 16 September 2020 at 16:05

If I remember correctly, you can add a <link> with your font awesome url in the <head>-tag of src/index.html in your Angular app. The font should be available in the whole app.

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

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

Adding font awesome to my angular input field

There are 2 best solutions below

Related Questions in ANGULAR

Related Questions in FONT-AWESOME-5

Related Questions in ANGULAR-FONTAWESOME

Trending Questions

Popular # Hahtags

Popular Questions