How to create an icon in an Angular project using FontAwesome

So I just learned that if you want to insert an icon into a frontend website you don’t use images anymore but you use the icon like it was a font – For example by using the FontAwesome library.

Boostrap 4 does not support Glyphicons anymore, you can use Font Awesome instead. But if you just follow the FontAwesome instructions you will fail in an Angular project.

Instead check the hint on this page:

Font Awesome now has an official Angular component that’s available for all who want to easily use our icons in projects. If you are using Angular, you need the angular-fontawesome package or Web Fonts with CSS.

Okay this means in an Angular project you need to use the following packageAngular FontAwesome

The best page that I have found for me as I am using NPM was this page.

So basically you need to:

  1. Install FontAwesome in NPM
  2. Import the module AngularFontAwesomeModule in your app.module.ts
  3. Add the CSS in the angular-cli.json file

The details are all described in the link above.

Power Off Icon
  1. To finally add an icon you can add a power-off icon in the app.component.html file:
<fa-icon [icon]="faPowerOff"&gt;</fa-icon&gt;
  1. AND you need to add the code in the related app.component.ts file:
    import { faPowerOff } from '@fortawesome/free-solid-svg-icons';
    ...
    export class AppComponent implements OnInit {
      faPowerOff = faPowerOff;
    ...

ONE IMPORTANT NOTE!

Please realize you need to install the correct version of AngularFontawesome in NPM for your Angular version. Check this page for the compatibility table.

I used Angular 5 so I had to install it like this:

npm install @fortawesome/angular-fontawesome@0.1.1

The entry will then be added to your package.json file.

Werbeanzeigen

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google Foto

Du kommentierst mit Deinem Google-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s