Javascript React.js未呈现正确的字体图标

我在react.js中遇到了字体很棒的问题。在这里，我想使用条件操作符呈现不同的图标。我能够正确地看到span标记渲染的值，但看不到字体图标

我可以看到图标在这里呈现为svg。但我不确定是什么导致了这个问题

感谢您的帮助

图标链接实体：

常规图标链接：

jsFiddle：

类Hello扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
切换：真
}
}
切换（）{
this.setState（{toggle:！this.state.toggle}）；
}
render（）{
返回(
你好{this.props.name}
{
这个。状态。切换(
固体
) : (
有规律的
)
}
切换
)
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);

我添加了这个（从这里获取），效果很好

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

---

并删除了fontawesome js文件

fontawesome javascript不会在React-rerender触发器上重新启动。如果不使用新的font awesome svg/javascript图标，您可以将font awesome用作带有css的webfont

在index.html中，删除fontawesome脚本，并添加font awesome css样式表：

<link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet">

示例代码：

import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faCircle as fasCircle } from '@fortawesome/fontawesome-free-solid'
import { faCircle as farCircle } from '@fortawesome/fontawesome-free-regular'

const Circle = ({ filled, onClick }) => {

  return (
    <div onClick={onClick} >
      <FontAwesomeIcon icon={filled ? farCircle : fasCircle}/>
    </div>
  );
};

class App extends React.Component {
  state = { filled: false };

  handleClick = () => {
    this.setState({ filled: !this.state.filled });
  };

  render() {
    return <Circle filled={this.state.filled} onClick={this.handleClick} />;
  }
}

从'@fortawesome/fontawesome'导入fontawesome'
从“@fortaweasome/react fontaweasome”导入Fontaweasome图标
从“@fortwome/fontwome free solid”导入{faCircle as fascrle}
从“@fortwome/fontwome free regular”导入{faCircle as farcycle}
常量圆=（{filled，onClick}）=>{
返回(
);
};
类应用程序扩展了React.Component{
状态={filled:false}；
handleClick=（）=>{
this.setState（{filled:！this.state.filled}）；
};
render（）{
返回；
}
}

---

有关更多信息，请参阅github repo:

您还可以使用反应图标

以下图标当前支持的反应图标

---

等等

问题在于，您使用的是JS文件中的SVG内联，而应该使用图标字体（css文件）。使用cdn中的css

yarn add @fortawesome/fontawesome @fortawesome/react-fontawesome
yarn add @fortawesome/fontawesome-free-regular @fortawesome/fontawesome-free-solid

import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faCircle as fasCircle } from '@fortawesome/fontawesome-free-solid'
import { faCircle as farCircle } from '@fortawesome/fontawesome-free-regular'

const Circle = ({ filled, onClick }) => {

  return (
    <div onClick={onClick} >
      <FontAwesomeIcon icon={filled ? farCircle : fasCircle}/>
    </div>
  );
};

class App extends React.Component {
  state = { filled: false };

  handleClick = () => {
    this.setState({ filled: !this.state.filled });
  };

  render() {
    return <Circle filled={this.state.filled} onClick={this.handleClick} />;
  }
}

Material Design Icons by Google https://www.google.com/design/icons/ (licence: CC-BY 4.0)
Font Awesome by Dave Gandy - http://fontawesome.io (licence: SIL OFL 1.1)
Typicons by Stephen Hutchings - http://typicons.com (licence: CC BY-SA)
Github Octicons icons by Github https://octicons.github.com/ (licence: SIL OFL 1.1)