How to import css in Angular 6?

0

I noticed that from version Angular 4.3 to Angular 6 they removed the .lang-cli.json file, because of this I am including in the main project file the index.html , but importing Font-Awesome is not working, would anyone have a suggestion?

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Blog</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="./assets/css/style.css">
  <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.css">
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>
    
asked by anonymous 04.09.2018 / 20:46

1 answer

1

First install the font-awesome by npm.

npm install font-awesome

Then just add to your angular.json in the style area as below. I already put the bootstrap in the example as well.

 ....
 "styles": [
     "src/styles.css",
     "./node_modules/bootstrap/dist/css/bootstrap.css",
     "./node_modules/font-awesome/css/font-awesome.css"
 ],
.....

Note that this path uses the default node_module folder. If you use it otherwise just put your path and it will work.

This way angular will manage these imports including optimizing for build.

    
05.09.2018 / 01:17