我正在尝试在我正在处理的反应项目中使用网站标题旁边的字体,但它没有显示。
我已经导入了font-awesome
通过纱线打包并将其CSS导入到我的index.js文件中,但它没有显示在我的标题中。
索引.js:
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "../node_modules/font-awesome/css/font-awesome.min.css";
ReactDOM.render(<App />, document.getElementById("root"));
标头组件:
import React, { Component } from "react";
export default class Header extends Component {
render() {
return (
<div>
<div className="col-md-6 m-auto">
<h1 className="text-center mb-3">
<i className="fas fa-book-open"> </i>
English Dictionary
</h1>
</div>
</div>
);
}
}
仅显示标题文本。
我检查了浏览器是否有任何错误,但没有显示任何错误,
当我检查页面时,我也看到了该元素。
<i className="fas fa-book-open"> </i>
希望大家能够帮助我,谢谢!
您需要按照以下步骤才能使用font-awesome
with react
:
安装这些依赖项:
npm i @fortawesome/fontawesome-svg-core
npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/react-fontawesome
在需要使用它们的地方进行必要的导入:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTimes } from '@fortawesome/free-solid-svg-icons'
在 JSX 中使用:
<FontAwesomeIcon icon={faTimes} />
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)