字体图标未加载到Angular项目中

Question

我已经使用Angular 5有一段时间了，但似乎无法将任何font-awesome图标加载到我的构建项目中。

我按照下面链接中提到的步骤仔细操作： https://www.npmjs.com/package/angular-font-awesome CSS文件似乎已包含在项目中，但无法加载字体，我在浏览器开发工具的网络部分进行了检查。

在渲染的页面上，我只看到方形图标，而不是font-awesome图标。

如果有人能帮助我解决这个问题，我会非常感激。

- vahid Geraeinejad

---

请查看此答案。 - Aravind

Answer 1

安装font-awesome的默认包：

使用以下命令安装font-awesome的默认包：

$ npm i font-awesome

打开你的angular-cli.json文件，搜索styles和assets属性，将以下内容添加到其中：

  // styles
  "../node_modules/font-awesome/css/font-awesome.css"
  // assets
  "../node_modules/font-awesome/fonts"

（您当然可以复制字体并将它们放入自己的文件夹中。）

- user4676340

---

谢谢，它起作用了。但是当然，如果没有安装 angular-font-awesome 包，我将无法在我的HTML文件中使用fa标签。希望这暂时不会引起任何麻烦。 - vahid Geraeinejad

你仍然可以制作自定义指令，这不仅有用，而且您将能够为您的每个项目制作它（谁知道，也许还能制作自己的NPM包！） - user4676340

Answer 2

最终，您应该拥有一个文件结构，其中包含CSS、JS、字体子目录以及使用字体图标的HTML文件。以下代码指向字体所在的位置，并且必须包含在样式表中。将其链接到您的HTML文件中。如果您愿意，可以将此作为单独的样式表并命名为“font.css”，但请确保在每个需要字体图标的HTML文件中链接到它。我是一个新手 - 以后我会在更高的层面上工作。

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

- richie

Answer 3

安装font-awesome库并将依赖项添加到package.json中...

使用CSS

要将Font Awesome CSS图标添加到您的应用程序中，请在angular-cli.json中添加以下配置。

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

使用SASS

在src/中创建一个空文件_variables.scss。

将以下内容添加到_variables.scss:

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

在 styles.scss 文件中添加以下内容：

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

- santosh singh