如何添加字体到Angular 2 + CLI项目

小开

经过一些实验，我设法得到以下工作:

安装npm:
```
npm install font-awesome --save
```

add to angular-cli-build.js file:

vendorNpmFiles : [
font-awesome/**/*.+(css|css.map|otf|eot|svg|ttf|woff|woff2)',
]

add to index.html

<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">

The key was to include the font file types in the angular-cli-build.js file

.+(css|css.map|otf|eot|svg|ttf|woff|woff2)

小开

对于Angular2 RC5和angular-cli 1.0.0-beta.11-webpack.8，你可以通过css导入来实现这一点。

只需安装字体awesome:

npm install font-awesome --save

然后在你配置的样式文件中导入 font-awesome:

@import '../node_modules/font-awesome/css/font-awesome.css';

(样式文件在angular-cli.json中配置)

小开

最佳答案

在Angular 2.0最终版发布之后， Angular2 CLI 项目的结构已经改变 —你不需要任何供应商文件，不需要 system.js —只有 webpack。所以你会:

npm install font-awesome --save

在angular-cli.json文件中找到styles[]数组，并在这里添加字体-很棒的引用目录，如下所示:

"apps": [
{
"root": "src",
"outDir": "dist",
....
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/font-awesome/css/font-awesome.css" // -here webpack will automatically build a link css element out of this!?
],
...
}
]
],

在Angular的最新版本中，使用angular.json文件代替../文件。例如，使用"node_modules/font-awesome/css/font-awesome.css"。

在任何你想要的 html 文件中放置一些字体很棒的图标:
```
 
```
通过 Ctrl + c 停止应用程序，然后使用`ng serve`重新运行应用程序，因为监视器仅针对src文件夹和angular-cli.json。

小开

如果你使用的是SASS，你可以通过npm安装它

npm install font-awesome --save

并在/src/styles.scss中导入它:

$fa-font-path: "../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome.scss";

提示:只要可能，避免与angular-cli基础设施混淆。；）

小开

上面的答案有点过时了，有一种稍微简单的方法。

通过NPM安装

npm install font-awesome --save
在你的style.css:

@import '~font-awesome/css/font-awesome.css';

或在style.scss中:

$fa-font-path: "~font-awesome/fonts"; @import '~font-awesome/scss/font-awesome';

编辑:如注释中所述，字体行必须在新版本上更改为$fa-font-path: "../../../node_modules/font-awesome/fonts";

使用~将使sass查找node_module。这样做比相对路径更好。原因是，如果你在npm上上传了一个组件，然后在组件scss中导入了font-awesome，那么它将使用~正常工作，而不是使用相对路径，因为相对路径在那一点上是错误的。

此方法适用于任何包含css的npm模块。它也适用于scss。然而如果你导入css到你的样式。SCSS是行不通的(也许反之亦然)。原因如下

小开

使用LESS(不是SCSS)、Angular 2.4.0和标准Webpack(不是Angular CLI)，下面的方法对我来说是有效的:

npm install --save font-awesome

And(在my app.component.less中):

@import "~font-awesome/less/font-awesome.less";

当然，您可能需要这个明显且高度直观的代码片段(在模块中)。webpack.conf中的加载器

        {
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
loader: 'file?name=graphics/[name].[ext]'
},

加载器是用来修复webpack错误的

"Module parse failed: \node_modules\font-awesome\fonts\fontawesome-webfont.svg?v=4.7.0 Unexpected token (1:0)"

regexp匹配那些svg引用(有或没有版本规范)。取决于你的webpack设置，你可能不需要它，或者你可能需要其他东西。

小开

在Angular项目中使用Font-Awesome有三个部分

安装
样式(CSS / SCSS)
Angular中的用法

安装

从NPM安装并保存到package.json

npm install --save font-awesome

样式 如果使用CSS

插入到style.css中

@import '~font-awesome/css/font-awesome.css';

样式 如果使用SCSS 

插入到style.scss中

$fa-font-path: "../node_modules/font-awesome/fonts"; @import '~font-awesome/scss/font-awesome.scss';

在普通Angular 2.4+ 4+中使用

使用Angular Material

在app.module.ts中修改构造函数以使用MdIconRegistry .ts

export class AppModule { constructor(matIconRegistry: MatIconRegistry) { matIconRegistry.registerFontClassAlias('fontawesome', 'fa'); } }

并将MatIconModule添加到您的@NgModule导入

@NgModule({ imports: [ MatIconModule, .... ], declarations: .... }

现在在任何模板文件中都可以这样做

小开

编辑:我使用 angular ^4.0.0和 angular ^1.4.3

如果你有ElectronJS或类似的问题，并有404错误，一个可能的解决方案是 uedit 你的webpack.config.js，通过添加(并假设你已经通过npm或包安装了字体超棒的节点模块。json文件):

new CopyWebpackPlugin([ { from: 'node_modules/font-awesome/fonts', to: 'assets' }, { from: 'src/assets', to: 'assets' } ]),

注意，我使用的webpack配置有src/app/dist作为输出，并且，在dist中，webpack创建了一个assets文件夹:

// our angular app entry: { 'polyfills': './src/polyfills.ts', 'vendor': './src/vendor.ts', 'app': './src/app/app', }, // Config for our build files output: { path: helpers.root('src/app/dist'), filename: '[name].js', sourceMapFilename: '[name].map', chunkFilename: '[id].chunk.js' },

所以基本上，目前的情况是:

Webpack正在将字体文件夹复制到开发资产文件夹。

Webpack正在将dev assets文件夹复制到dist assets文件夹

现在，当构建过程将完成时，应用程序将需要寻找.scss文件和包含图标的文件夹，正确地解析它们。为了解决这些问题，我在webpack配置中使用了这个:

// support for fonts { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader?name=dist/[name]-[hash].[ext]' },

最后，在.scss文件中，我导入字体很棒的.scss，并定义字体的路径，同样是dist/assets/font-awesome/fonts。路径是dist，因为在我的webpack。配置输出。path被设置为helpers.root('src/app/dist');

因此，在app.scss中:

$fa-font-path: "dist/assets/font-awesome/fonts"; @import "~font-awesome/scss/font-awesome.scss";

注意，通过这种方式，它将定义字体路径(稍后在.scss文件中使用)，并使用~font-awesome导入.scss文件来解析node_modules中的字体路径。

这是相当棘手的，但这是唯一的方法，我发现绕过404错误问题与 Electron.js

小开

从https://github.com/AngularClass/angular-starter开始，在测试了许多不同的配置组合之后，下面是我所做的让它与AoT一起工作。

正如已经说过很多次，在我的app.component.scss:

$fa-font-path: "~font-awesome/fonts" !default; @import "~font-awesome/scss/font-awesome";

然后在webpack.config.js中(实际上是启动包中的webpack.comm .js):

在插件部分:

new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' }, { from: 'src/meta'}, { from: 'node_modules/font-awesome/fonts', to: 'assets/fonts/' } ]),

在规则部分:

, { test: /\.(eot|woff2?|svg|ttf)([\?]?.*)$/, use: 'file-loader?name=/assets/fonts/[name].[ext]' }

小开

这里有很多好的答案。但如果你尝试了所有这些，仍然得到方形而不是方正的图标，检查你的css规则。在我的例子中，我有以下规则:

* { font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important; }

它覆盖了一些字体。只是将*选择器替换为body解决了我的问题:

body { font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important; }

小开

 2020年2月更新:
fortawesome包现在支持ng add，但它是可用的仅适用于角9和up:

ng add @fortawesome/angular-fontawesome

2019年10月8日更新:

你可以使用一个新的包https://www.npmjs.com/package/@fortawesome/angular-fontawesome

npm install @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

将FontAwesomeModule添加到src/app/app.module.ts中的imports中:

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; @NgModule({ imports: [ BrowserModule, FontAwesomeModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { }

将图标绑定到组件src/app/app.component.ts中的属性:

import { Component } from '@angular/core'; import { faCoffee } from '@fortawesome/free-solid-svg-icons'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { faCoffee = faCoffee; }

使用模板src/app/app.component.html中的图标:

最初的回答:

选项1:

你可以使用angular-font-awesome npm模块

npm install --save font-awesome angular-font-awesome

导入模块:

... // import { AngularFontAwesomeModule } from 'angular-font-awesome'; @NgModule({ //... imports: [ //... AngularFontAwesomeModule ], //... }) export class AppModule { }

如果你使用的是Angular CLI，那就在Angular - CLI .json的styles中添加这个漂亮的CSS

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

注意:如果使用 SCSS 预处理器，只需更改SCSS的css

使用示例:

选项2:

现在有一个官方说法

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

npm install --save font-awesome

使用CSS

添加CSS图标到你的应用程序…

// in .angular-cli.json "styles": [ "styles.css", "../node_modules/font-awesome/css/font-awesome.css" ]

使用 SAAS

在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';

测试

运行ng serve以开发模式运行应用程序，并导航到http://localhost:4200。

要验证Font Awesome已正确设置，将src/app/app.component.html更改为以下…

\{\{title}}

保存此文件后，返回浏览器，在应用程序标题旁边看到字体Awesome图标。

还有一个相关的问题Angular CLI将font-awesome字体文件输出到dist根目录，默认情况下，angular cli将字体输出到dist根目录，顺便说一下，这根本不是一个问题。

小开

webpack2使用:

{ test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/, loader: "file-loader" }

而不是file-loader?name=/assets/fonts/[name].[ext]

小开

把它加到你的包里。json作为 “devDependencies” Font-awesome: "version number"

进入命令提示符，输入您配置的npm命令。

小开

我想使用字体Awesome 5+和大多数答案集中在旧版本

对于新的Font Awesome 5+， angular项目还没有发布，所以如果你想使用Font Awesome网站atm上提到的例子，你需要使用一个变通方法。(尤其是fas, far类而不是fa类)

我刚刚在我的styles.css中导入了cdn到Font Awesome 5。只是添加了这个，以防它能帮助别人比我更快地找到答案:-)

样式代码。css

@import "https://use.fontawesome.com/releases/v5.0.7/css/all.css";

小开

如果由于某种原因你不能安装包抛出npm。你可以编辑index.html，并在头部添加字体和CSS。然后用在项目中。

小开

对于Angular 6，

第一个npm install font-awesome --save

将node_modules/font-awesome/css/font-awesome.css添加到 angular.json 。

记住不在node_modules/前面添加任何点。

小开

这篇文章描述了如何将Fontawesome 5集成到角6中(Angular 5和以前的版本也可以工作，但你必须调整我的文章)

选项1:添加css-Files

利:每个图标都将包括在内

Contra:每个图标将包括(更大的应用程序大小，因为所有字体都包括在内)

添加以下包:

npm install @fortawesome/fontawesome-free-webfonts

然后在angular.json中添加以下代码行:

"app": { .... "styles": [ .... "node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css", "node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css", "node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css", "node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css" ], ... }

选项2:Angular包

优点:应用程序更小

反:你必须单独包含你想要使用的每个图标

使用FontAwesome 5 Angular包:

npm install @fortawesome/angular-fontawesome

只需按照他们的文档添加图标。他们使用svgs -icons，所以你只需要添加svgs / icons就可以了。

小开

我浪费了几个小时，试图使用AngularCLI 6.0.3和Material Design来获得最新版本的fontaweesome 5.2.0。我遵循了FontAwesome网站上的npm安装说明

他们最新的文档指导你使用以下方法进行安装:

npm install @fortawesome/fontawesome-free

在浪费了几个小时后，我终于卸载了它，并使用以下命令安装字体awesome(这安装FontAwesome v4.7.0):

npm install font-awesome --save

现在它可以很好地使用:

fa-font-path: "~font-awesome/fonts" !default; @import "~font-awesome/scss/font-awesome.scss";

小开

我想我会抛出我的决议，因为字体awesome现在安装不同，根据他们的文档。

npm install --save-dev @fortawesome/fontawesome-free

为什么它是fortawesome现在我不知道了，但我想我会坚持使用最新的版本，而不是回到旧的字体-真棒。

然后我把它导入我的scss

fa-font-path: "../node_modules/@fortawesome/fontawesome-free/webfonts"; @import "~@fortawesome/fontawesome-free/scss/fontawesome"; @import "~@fortawesome/fontawesome-free/scss/brands"; @import "~@fortawesome/fontawesome-free/scss/regular"; @import "~@fortawesome/fontawesome-free/scss/solid"; @import "~@fortawesome/fontawesome-free/scss/v4-shims";

希望这能有所帮助

小开

以上工作说明很多，建议大家看一下。不过，有一点需要注意:

在安装后使用 没有工作在我的项目(新实践项目只有一个星期)，这里的示例图标也从字体Awesome复制到剪贴板在过去的一周内。

This 做的工作。如果在你的项目上安装了Font Awesome后，它还不能工作，我建议检查图标上的类，删除's'，看看它是否工作。

小开

你可以使用Angular Font Awesome包

NPM install——save angle -font-awesome

然后在你的模块中导入:

import { AngularFontAwesomeModule } from 'angular-font-awesome'; @NgModule({ //... imports: [ //... AngularFontAwesomeModule ], //... }) export class AppModule { }

并导入angular-cli文件中的样式:

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

在NPM库中查看更多关于包的详细信息:

https://www.npmjs.com/package/angular-font-awesome

然后像这样使用它:



小开

字体太棒了为您提供了scalablevector图标，可以立即自定义大小、颜色、投影以及任何可以通过CSS功能完成的功能。

创建一个新项目并导航到该项目。

ng new navaApp cd navaApp

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

npm install --save font-awesome

使用CSS

添加CSS图标到你的应用程序…

// in angular.json "build": { "options": { "styles": [ "../node_modules/font-awesome/css/font-awesome.css", "src/styles.css" ], } }

使用 SASS

使用SASS创建新项目:

ng new cli-app --style=scss

在现有项目中使用CSS:

重命名src/styles.css为src/styles.scss 将angular.json更改为寻找styles.scss而不是css:

// in angular.json "build": { "options": { "styles": [ "src/styles.scss" ], } }

确保将styles.css更改为styles.scss。

在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';

小开

要在你的Angular项目中使用Font Awesome 5，将下面的代码插入到src/index.html文件中。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

好运！

小开

对于使用ng的Angular 9:

ng add @fortawesome/angular-fontawesome@0.6.x

看这里更多信息

小开

5. For fontawesome;X +最简单的方法是，

使用NPM包安装: npm install --save @fortawesome/fontawesome-free 
在你的styles.scss文件中包括:

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import '~@fortawesome/fontawesome-free/scss/fontawesome'; @import '~@fortawesome/fontawesome-free/scss/solid'; @import '~@fortawesome/fontawesome-free/scss/regular';

注意:如果你有_variables.scss文件，那么将fa-font-path包含在其中更合适，而不是在styles.scss文件中。

小开

公认的答案已经过时了。

angular 9 和 Fontawesome 5

安装FontAwesome

NPM install @fortawesome/ fontawessome -free——save
. exe

在angular上注册。样式下的Json

“node_modules / @fortawesome / fontawesome-free / css / all.min.css”

使用它在你的应用程序

小开

现在有几种方法可以在Angular CLI上安装fontAwesome:

ng add @fortawesome/angular-fontawesome OR using yarn yarn add @fortawesome/fontawesome-svg-core yarn add @fortawesome/free-solid-svg-icons yarn add @fortawesome/angular-fontawesome OR Using NPM npm install @fortawesome/fontawesome-svg-core npm install @fortawesome/free-solid-svg-icons npm install @fortawesome/angular-fontawesome

此处引用:https://github.com/FortAwesome/angular-fontawesome

小开

在Angular 11中

npm install @fortawesome/angular-fontawesome --save npm install @fortawesome/fontawesome-svg-core --save npm install @fortawesome/free-solid-svg-icons --save

然后在app.module.ts at imports array中

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; imports: [ BrowserModule, FontAwesomeModule ],

然后在any.component.ts中

turningGearIcon = faCogs;

然后any.component.html

小开

如果你想使用免费版本的字体awesome - bootstrap，使用这个:

npm install --save @fortawesome/fontawesome-free

如果你正在构建angular项目，你还需要在你的angular中添加这些导入。json:

"styles": [ "src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.min.css", "node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/@fortawesome/fontawesome-free/js/all.js" ]