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

Posted 2023-03-06

【中文标题】font-awesome 字体未加载到 Angular 项目中

【英文标题】：font-awesome fonts are not loaded into angular project

【发布时间】：2018-06-17 05:27:57

【问题描述】：

我使用 angular 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"

（你当然可以把字体复制到自己的文件夹中）。

【讨论】：

谢谢，它成功了。但当然，如果没有安装 angular-font-awesome 包，我将无法在我的 html 文件中使用 fa 标签。希望这不会造成任何麻烦。

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

【参考方案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;

【参考方案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';