6

I have installed @fortawesome/angular-fontawesome - from here - https://www.npmjs.com/package/@fortawesome/angular-fontawesome into my Angular 7 application.

I can use the icon using but i cannot find a way to add them through CSS.

I am trying to add ico CSS Pseudo-elements like this: 

.test:before {
    font-family: "Font Awesome 5 Free";
    content: "\f75b";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
 }

This is not working. All im seeing is a empty square. Anyone figured out how to use icons through CSS Pseudo-elements?

user9791525
  • 91
  • 1
  • 5

3 Answers3

0

I didn't found a way using the angular-font-awesome package to able use it with pseudo elements in css or .scss.

The only method that I found is this: [ Paste this next code in the top of your styles.css or styles.scss file ]

@font-face {
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: normal;
    src: url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
    src: url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");}

I know that I'm importing again font awesome, but I hope this unpractical method will help you.

Mario Junior Torres Perez
  • 139
  • 7
0

I found no way. Poor me finally added the font awesome cdn in my only index.html file which (obviously would and did) solve the problem.

Ahmad Nku
  • 1
  • 1
  • This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/33938883) – avariant Mar 03 '23 at 17:14
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 05 '23 at 00:02
-3

Use font-family: "FontAwesome";

Sophia
  • 1
  • 1
  • The package uses SVG with JS and not the font FontAwesome. Maybe the question missguided your answer. – aUXcoder Jul 03 '19 at 19:51
  • Im beginning to think you need to install fontAwesome on top of @fortawesome/angular-fontawesome if I want to use it inside :before/:after – user9791525 Jul 05 '19 at 01:29