我试图通过单击待办事项列表项来切换Font Awesome图标.这是整个组件......

import React from 'react';

import './TodoItem.scss';

class TodoItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      complete: false
    }
    this.toggleComplete = this.toggleComplete.bind(this);
  }

  toggleComplete() {
    this.setState(prevState => ({
      complete: !prevState.complete
    }));
  }

  render() {
    const incompleteIcon = <span className="far fa-circle todo-item-icon"></span>;
    const completeIcon = <span className="far fa-check-circle todo-item-icon"></span>;

    return (
      <div className="todo-item" onClick={this.toggleComplete}>
        {this.state.complete ? completeIcon : incompleteIcon}
        <span className="todo-item-text">{this.props.item}</span>
      </div>
    );
  }
}

export default TodoItem;

这是我的FA 5 CDN(直接来自网站)......

<script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>

我拍了一些React开发工具和检查员的截图......

这是React组件,但不完整(默认)

虽然完整......

检查器中的两个图标元素,我注意到默认情况下未使用的元素已被注释掉. …

我究竟做错了什么？

<ul>
<li class="facebook"> Facebook</li>
<li><i class="fab fa-twitter-square"></i> Twitter</li>
</ul>

li.facebook:before {
    content: "\f09a";
    font-family: FontAwesome;
}
li {
  list-style:none;
}

JSFiddle:https://jsfiddle.net/labanino/nwodoo32/

我正在尝试将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>在我的标记中使用)

我无法使用这些代码着色font-awesome5图标.我尝试了"填充"css属性来设置颜色,但它没有用.

HTML代码:

<div class="container mt200 icons">
  <div class="col-md-3">
    <div class="bggray2 text-center">
      <i class="fas fa-microphone fa-5x"></i>
      <div class="title">LOREM</div>
      <div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="bggray2 text-center">
      <i class="far fa-edit fa-5x"></i>
      <div class="title">LOREM</div>
      <div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
      </div>
    </div>
  </div>
</div>

CSS代码:

.icons i {
  color: #2759AE;
}

我以这种方式在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 ...不起作用.

我有角度和字体很棒的问题。在第一代图标列表中，所有基于CSS类的图标突然都转换为svg。它仅影响实体图标。例如 ：

<i class="fas fa-2x fa-minus-square"></i>

被翻译成

<svg _ngcontent-c16="" class="svg-inline--fa fa-minus-square fa-w-14 fa-2x"
 ng-reflect-ng-class="fas fa-2x fa-minus-square" aria-hidden="true" data-prefix="fas" data-icon="minus-square"
 role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
    <path fill="currentColor"
      d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM92 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H92z">
    </path>
</svg>
<!-- <i _ngcontent-c16="" class="fas fa-2x fa-minus-square" ng-reflect-ng-class="fas fa-2x fa-minus-square"></i> -->

有什么选择可以防止这种情况吗？强制以某种方式翻译？

这可能是有问题的。例如，我不能使用纯色图标:(

import { library } from '@fortawesome/fontawesome-svg-core';
import { faCopy, faQuestionCircle, faQrcode, faGithub } from '@fortawesome/free-solid-svg-icons';

import AddressList from './components/AddressList';

library.add(faCopy, faQuestionCircle, faQrcode, faGithub);

我有这段代码可以在 App.js 中导入 fontawesome 图标以进行反应。我正在使用免费版本。

我收到此错误：

编译失败。

./src/App.js 尝试导入错误：“faGithub”未从“@fortawesome/free-solid-svg-icons”导出。

现在我所能理解的是，免费版本也许没有 github 图标？但是在他们的网站上。

那是免费和github过滤。我现在看到了，为什么我是个菜鸟？

"@fortawesome/fontawesome-svg-core": "^1.2.6",
"@fortawesome/free-solid-svg-icons": "^5.4.1",
"@fortawesome/react-fontawesome": "^0.1.3",

^ my package.json

另一个快速问题，font awesome 甚至存在于文件树中的什么位置？我在任何地方都找不到。

我已经按照字体真棒文档中的描述全局配置了我的主机

我正在运行以下内容：

npm config set "@fortawesome:registry" https://npm.fontawesome.com/
npm config set "//npm.fontawesome.com/:_authToken" "${NPM_FONT_AWESOME_AUTH_TOKEN}"

我有以下错误：

npm ERR! code E401
npm ERR! Unable to authenticate, need: Basic realm="https://npm.fontawesome.com/"

我希望进行身份验证。

如果您从浏览器https://npm.fontawesome.com/访问，则您拥有基本身份验证，我不确定我在这里应该期待什么，因为我以前从未尝试过。

这是最近发生的，配置工作了一年。是我还是 fontawesome 服务器？

如何修复 fontawesome npm 身份验证？

字体真棒5星图标有<i class="fas fa-star"></i>和<i class="far fa-star"></i>不同是fas , far和两者的Unicode f005现在我想用它作为我的评级系统,其中第一个是常规明星,点击成为实心明星,但我如何fas far在我的CSS中定义这个？

码

input.star:checked ~ label.star:before {
              content: '\f005';
              color: #e74c3c;
              transition: all .25s;
              font-family: 'Font Awesome 5 Free';
              font-weight: 900;
}


label.star:before {
          content: '\f005';
          font-family: 'Font Awesome 5 Free';
          font-weight: 900;
}

我的代码在上面我只得到坚实的明星

我使用的是Angle 7.0.1和Angle Material 7.0.2，我想添加字体真棒5.4.2图标，并且尝试按照fontawesome网站上的步骤操作，但是我无法获得字体真棒图标字体。

第一：

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

然后在styles.scss中添加：

@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';

并在_variables.scss中添加：

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';

现在在app.component.ts中添加：

import { MatIconRegistry } from "@angular/material";

[...]

constructor(
    public matIconRegistry: MatIconRegistry,
  ) {
    matIconRegistry.registerFontClassAlias ('fas');  // tried with 'fas' and with 'fa'
  }

最后我打算用以下命令打印字体很棒的图标：

<mat-icon mat-list-icon fontIcon="fas github"></mat-icon>  // tryed also with 'fas-github', 'fasGithub', 'github', 'fa-github', 'fa github' and 'faGithub'

但是从未打印过字体超赞的图标字体。我错过了一些重要而又显而易见的东西，但是现在我没有看到它。