-1

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.

peinearydevelopment
  • 11,042
  • 5
  • 48
  • 76
Bukoye
  • 61
  • 1
  • 8

2 Answers2

1

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

mohamed zerdan
  • 106
  • 9
0

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

AverageProgrammer
  • 154
  • 2
  • 3
  • Please kindly read my question again... Im avoidimg the use of links since fontawesome is already installed in my angular app – Bukoye Sep 16 '20 at 17:36