Skip to content

Latest commit

 

History

History
62 lines (47 loc) · 1.54 KB

include-font-awesome.md

File metadata and controls

62 lines (47 loc) · 1.54 KB

Include Font Awesome

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Create a new project and navigate into the project...

ng new my-app
cd my-app

Install the font-awesome library and add the dependency to package.json...

npm install --save font-awesome

Using CSS

To add Font Awesome CSS icons to your app...

// in angular.json
"build": {
  "options": {
    "styles": [
      "../node_modules/font-awesome/css/font-awesome.css"
      "styles.css"
    ],
  }
}

Using SASS

Create an empty file _variables.scss in src/.

Add the following to _variables.scss:

$fa-font-path : '../node_modules/font-awesome/fonts';

In styles.scss add the following:

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';

Test

Run ng serve to run your application in develop mode, and navigate to http://localhost:4200.

To verify Font Awesome has been set up correctly, change src/app/app.component.html to the following...

<h1>
  {{title}} <i class="fa fa-check"></i>
</h1>

After saving this file, return to the browser to see the Font Awesome icon next to the app title.

More Info