我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
我使用的是Angular 2+和Angular CLI。
我如何添加字体awesome到我的项目?
当前回答
公认的答案已经过时了。
棱角分明,棱角分明
安装FontAwesome NPM install @fortawesome/ fontawessome -free——保存 在angular上注册它。样式下的Json “node_modules / @fortawesome / fontawesome-free / css / all.min.css” 在您的应用程序中使用它
其他回答
对于使用ng的Angular 9:
ng add @fortawesome/angular-fontawesome@0.6.x
更多信息请看这里
公认的答案已经过时了。
棱角分明,棱角分明
安装FontAwesome NPM install @fortawesome/ fontawessome -free——保存 在angular上注册它。样式下的Json “node_modules / @fortawesome / fontawesome-free / css / all.min.css” 在您的应用程序中使用它
在Angular 2.0最终版发布之后,Angular2 CLI项目的结构已经改变了——你不需要任何供应商文件,不需要system.js——只需要webpack。所以你会:
npm install font-awesome --save In the angular-cli.json file locate the styles[] array and add font-awesome references directory here, like below: "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!? ], ... } ] ], In more recent versions of Angular, use the angular.json file instead, without the ../. For example, use "node_modules/font-awesome/css/font-awesome.css". Place some font-awesome icons in any html file you want: <i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i> Stop the application Ctrl + c then re-run the app using ng serve because the watchers are only for the src folder and angular-cli.json is not observed for changes. Enjoy your awesome icons!
我想使用字体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";
在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的imports array中
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
imports: [
BrowserModule,
FontAwesomeModule
],
然后在any.component.ts中
turningGearIcon = faCogs;
然后是any.component。html
<fa-icon [icon]="turningGearIcon"></fa-icon>