Question

我现在一直在使用角度5，似乎我无法在我的构建项目中加载任何字体 - 真棒图标。

我按照以下链接中的说明彻底执行了这些步骤。 https://www.npmjs.com/package/angular-font-awesome

似乎CSS文件包含在项目中，但是我无法加载字体，因为我在浏览器的开发者工具的网络部分中检查过。

我在渲染页面中看到的只是方形图标，而不是字体很棒的图标。

如果有人能帮助我，我真的很感激。

Answer 1

使用

安装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"

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

Answer 2

最终你应该得到一个文件结构，其中包含CSS，JS，FONTS的子目录以及将使用字体图标的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;
}

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

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

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

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

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

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

font-awesome字体未加载到角度项目中

3 个答案: