How to import css in Angular 6?

Asked

Viewed 1,353 times

0

I noticed that from Angular version 4.3 to Angular 6 they removed the file .angular-cli.json, because of this I am including in the main file of the project the index.html, but the Font-Awesome import is not working, someone would 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>
angular font-awesome
  • 1

    At angular 6 the configuration file was renamed to angular.json but still works the same way.

  • Manage to solve the problem thanks to your suggestion, can put your answer to I mark as right. thank you very much.

1 answer

1


First perform font-awesome installation by npm.

npm install font-awesome

Then just add in your angular json. in area style as below. I have already put 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 otherwise just put your way and it will work.

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

Browser other questions tagged angular font-awesome

You are not signed in. Login or sign up in order to post.