标签: angular-fontawesome

如何在Angular(2+)中使用font-awesome 5？

我试过在组件中添加它:

import {faChevronLeft, faChevronRight} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';
...
constructor(){
   fontawesome.library.add(faChevronLeft, faChevronRight);
}

然后在HTML中:

<span class="fa" [class.fa-chevron-left]="direction==='left'" [class.fa-chevron-right]="direction==='right'"></span>

但这给了我一个圆圈中闪烁的问号.

我正在尝试将font awesome 5包含在运行Angular> 5.0.0的angular-cli项目(1.6.0)中.

我用过(如上所述):

yarn config set @fortawesome:registry https://npm.fontawesome.com/xxxxx-xxxx-xxx-xxx-xxxxxxx
yarn add @fortawesome/fontawesome
yarn add @fortawesome/fontawesome-pro-light

它成功地获得了包.现在我想把包裹包含在我的angular-cli中.在我app.component.ts试图做的事情中(如https://www.npmjs.com/package/@fortawesome/fontawesome所述):

import  fontawesome  from '@fortawesome/fontawesome'
import { faUser } from '@fortawesome/fontawesome-pro-light'

但是打字稿会引发错误:

ERROR in src/app/app.component.ts(2,9): error TS1192: Module '"xxx/node_modules/@fortawesome/fontawesome/index"' has no default export.

使用Font Awesome 4我只将.css文件包含在"styles"数组中.但Font Awesome 5没有包含所有css的css文件.它只是一堆.js文件.

如何在Angular CLI项目中正确包含Font Awesome 5？(我希望能够<i class="fal fal-user"></i>在我的标记中使用)

我以这种方式在Angular项目中使用Fontawesome 5:

import fontawesome from '@fortawesome/fontawesome';
import { faBold, faItalic, faUnderline } from '@fortawesome/fontawesome-free-solid';

在构造函数中:

fontawesome.library.add(faBold, faItalic, faUnderline)

但是分别导入每个图标非常愚蠢.我能以某种方式一次导入所有图标吗？

upd:import * as icons ...不起作用.

我有一个angular 11正在开发的项目，使用angular-fontawesome和angular material icon。它包含一个“问题”模型，带有可选的“图标”属性：字符串；\'。数据常量“problem”包含多个“problem”的排列，其属性“icon”：是一个字符串，例如“donate”，表示从库导入的“faDonate”fontawesome图标。

我的代码：

comun.module.tsangular material icon ：导入和导出的公共模块 fontawesome

import { MatIconModule } from \'@angular/material/icon\';\n...\n// FontAwesome\nimport {\n  FontAwesomeModule,\n  FaIconLibrary,\n} from \'@fortawesome/angular-fontawesome\';\nimport {\n  faBars,\n  faDonate,\n  \xe2\x80\xa6\n} from \'@fortawesome/free-solid-svg-icons\';\n\xe2\x80\xa6\nexport class ComunModule {\n  constructor(library: FaIconLibrary) {\n    library.addIcons(\n      faBars,\n      faDonate,\n...\n

问题模型.ts

export interface Problema {\n  id: number;\n  grupo: string;\n  idgrupo: number;\n  subgrupo?: string;\n  titulo: string;\n  encabezado?: string;\n  frase: string;\n  icon?: string;\n  ley: string;\n …

我不知道如何将FontAwesome 5包含在Angular 2+应用程序中.我找到了这个包 - https://www.npmjs.com/package/@fortawesome/fontawesome 你能告诉我在哪里可以导入这个包吗？也许在app.module.ts文件中？

我已经将@fortawesome/angular-fontawesome - 从这里 - https://www.npmjs.com/package/@fortawesome/angular-fontawesome 安装到我的 Angular 7 应用程序中。

我可以使用图标 using 但我找不到通过 CSS 添加它们的方法。

我正在尝试添加这样的 ico CSS 伪元素：

.test:before {
    font-family: "Font Awesome 5 Free";
    content: "\f75b";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
 }

这是行不通的。我看到的只是一个空方块。有人知道如何通过 CSS Pseudo-elements 使用图标吗？

尝试@fortawesome/angular-fontawesome在我的 angular 7 应用程序中使用时出现以下错误：

node_modules/@fortawesome/angular-fontawesome/angular-fontawesome"' has no exported member 'FaIconLibrary

我按照文档并以这种方式初始化模块：

import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
(...)

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    (...)
    FontAwesomeModule,
    (...)
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(library: FaIconLibrary) {
    library.add(...icons);
  }
}

这是我使用的确切版本：

"@angular/core": "7.2.2",
(...)
"@fortawesome/angular-fontawesome": "^0.3.0",
"@fortawesome/fontawesome-pro": "^5.11.2",
"@fortawesome/fontawesome-svg-core": "1.2.21",
"@fortawesome/free-brands-svg-icons": "5.10.1",
"@fortawesome/free-regular-svg-icons": "5.10.1",
"@fortawesome/free-solid-svg-icons": "5.10.1",

非常感谢您的帮助！蒂埃里

只是想将 angular-fontawesome 与 Storybook.js 作为库（FaIconLibrary）一起使用。在以下文档中https://github.com/FortAwesome/angular-fontawesome/blob/master/docs/usage/icon-library.md#using-the-icon-library我要向构造函数添加一个属性。仅在 Storybook.js 文件 (index.stories.ts) 中，我看不到向构造函数添加任何内容的方法，因为它不存在。有人解决这个问题或者有好的解决办法吗？谢谢

经过一些研究,包括使用Angular,文档等阅读Font Awesome 5,我无法在Angular 5 App和Font-Awesome 5(Pro)之间进行整合.

问题:图标没有出现.

有关我当前场景的更多详细信息:

package.json:

(...)
"dependencies": {
"@angular/animations": "^5.2.4",
"@angular/common": "^5.2.4",
"@angular/compiler": "^5.2.4",
"@angular/core": "^5.2.4",
"@angular/forms": "^5.2.4",
"@angular/http": "^5.2.4",
"@angular/platform-browser": "^5.2.4",
"@angular/platform-browser-dynamic": "^5.2.4",
"@angular/router": "^5.2.4",
"@fortawesome/fontawesome": "^1.1.3",
"@fortawesome/fontawesome-pro-light": "^5.0.6",
"bootstrap": "^4.0.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.5.3",
"jquery": "^3.3.1",
"jquery-ui": "^1.12.1",
"popper.js": "^1.12.9",
"prismjs": "^1.11.0",
"rxjs": "^5.5.6",
"summernote": "^0.8.9",
"sweetalert2": "^7.11.0",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.20"
},
"devDependencies": {
"@angular/cli": "^1.7.0-rc.0",
"@angular/compiler-cli": "^5.2.4",
"@angular/language-service": "^5.2.4",
"@types/jasmine": "^2.8.6",
"@types/jasminewd2": "^2.0.3",
"@types/node": …

我已经成功地向我的 andular 6 项目添加了一个加载器，它将在初始加载时显示加载器，直到应用程序完全加载。然而，我似乎无法在微调器中加载一个很棒的字体图标。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';

import { AppComponent } from './app.component';

library.add(fab);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FontAwesomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

源代码/索引.html

<body>
  <abe-root>

    <div class="app-loading">
      <div class="logo"><fa-icon [icon]="['fab', 'angular']"></fa-icon></div>
      <svg class="spinner" viewBox="25 25 50 50">
        <circle class="path" cx="50" …

我试图了解在通过 scss 文件加载字体时如何通过 fontawsome 加载字体：

这是我的 webpack 配置：

const path                      = require('path');
const webpack                   = require('webpack');
const UrlLoader                 = require('url-loader');
const BrowserSyncPlugin         = require('browser-sync-webpack-plugin');
const VueLoaderPlugin           = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin      = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin   = require('optimize-css-assets-webpack-plugin');

publicFolder                    = path.resolve(__dirname, 'public');
// appFolder                        = path.resolve(__dirname, 'app');

module.exports = {

    entry: { 
                // Selects main js file
                main:   './public/es6/index.js'
    },

    output: {
                // Main path for the js folder
                path:       path.resolve(__dirname, 'public/js/'),
                // Select teh name the main js file (after compression) …

我正在尝试在 Angular 10 应用程序中使用 Font Awesome 品牌图标。我已经安装了 fontawesome 并尝试使用以下命令导入它：

import { faDiscord } from '@fortawesome/fontawesome-free-brands';

在我的组件中。然后我将 faDiscord 分配给一个属性，并尝试在我的 html 中像这样使用它：

<fa-icon [icon]="faDiscord"></fa-icon>

但是，我的组件现在卡在加载中，我该如何解决这个问题？已经看到这个问题：How do i usebrand fontawesome icon in Angular