[英]React.js not rendering correct font awesome icon
I am facing issue in react.js with font-awesome icon. 我在带有字体真棒图标的react.js中面临问题。 Here I would like to render different icons using conditional operator.
在这里,我想使用条件运算符来渲染不同的图标。 I am able to see the value of span tag rendering correctly but not the font awesome icon.
我能够正确看到span标记渲染的值,但看不到字体真棒图标。
I am able to see icons are rendered as svg here. 我能够看到图标在这里呈现为svg。 But I am not sure what is causing this issue.
但是我不确定是什么导致了这个问题。
Any help is appreciated. 任何帮助表示赞赏。
icon links solid: https://fontawesome.com/icons/star?style=solid 图标链接固定: https : //fontawesome.com/icons/star?style= solid
icon links regular: https://fontawesome.com/icons/star?style=regular 图标链接正常: https : //fontawesome.com/icons/star?style= regular
jsFiddle: https://jsfiddle.net/69z2wepo/182809/ jsFiddle: https ://jsfiddle.net/69z2wepo/182809/
class Hello extends React.Component {
constructor(props){
super(props);
this.state = {
toggle: true
}
}
toggle(){
this.setState({toggle: !this.state.toggle});
}
render() {
return (
<div>
Hello {this.props.name}
{
this.state.toggle ? (
<span><i className="fas fa-star"></i>solid</span>
) : (
<span><i className="far fa-star default-preference"></i>regular</span>
)
}
<div>
<button onClick={this.toggle.bind(this)}> Toggle </button>
</div>
</div>
)
}
}
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
The font-awesome javascript doesn't rerender on a React rerender trigger. 字体超赞的javascript不会在React重新渲染触发器上重新渲染。 If you are okay with not using the new font-awesome svg/javascript icons, you can use font-awesome as a webfont with css.
如果您可以不使用新的font-awesome svg / javascript图标,可以将font-awesome用作css的网络字体。
In your index.html, delete the fontawesome script, and add the font-awesome css stylesheet: 在index.html中,删除fontawesome脚本,然后添加font-awesome css样式表:
<link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet">
Your code should work now. 您的代码现在应该可以工作了。
The other possibility is to use the official font-awesome react package 另一种可能性是使用官方的超棒的react软件包
Add necessary packages to project: 向项目添加必要的包:
yarn add @fortawesome/fontawesome @fortawesome/react-fontawesome
yarn add @fortawesome/fontawesome-free-regular @fortawesome/fontawesome-free-solid
Example code: 示例代码:
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} />;
}
}
See the github repo for more information: https://github.com/FortAwesome/react-fontawesome 有关更多信息,请参见github回购: https : //github.com/FortAwesome/react-fontawesome
I added this (get it from here https://fontawesome.com/get-started ) and it worked fine 我添加了这个(从这里https://fontawesome.com/get-started获取),它工作正常
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
and deleted the fontawesome js file 并删除了fontawesome js文件
You can also use React Icons https://gorangajic.github.io/react-icons/ 您还可以使用React Icons https://gorangajic.github.io/react-icons/
React Icons currently Supported following icons
React Icons当前支持的图标
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)
etc.. 等等..
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.