logo标签列表

如何将Font Awesome添加到React.js中？

reactjs
3

我使用react.js构建了一个模板网站。

我开始构建第二个组件header.js，遇到了一个问题

我不知道如何将Font Awesome链接到react.js中

我应该把这个CDN放在哪里？在app.js还是在我的header.js中？

CDN：

最初的回答：

你可以将CDN放在index.html文件中，并在需要使用Font Awesome的地方直接引用即可。这样做可以节省时间，并且保持代码更加整洁。

 <link rel="stylesheet" 
 href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" 
 integrity="sha384- 
 50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" 
 crossorigin="anonymous">

这是我的app.js文件

 import React, { Component } from 'react';
 import Center from './Components/Center';
 import Header from './Components/Header';

 class App extends Component {
    render() {
      return (
       <div>
          <Header/>
          <Center/>
      </div>
    );
 }
 }

 export default App;

我的Header.js：

 import React from 'react';
 import image from './images/0.png'

const Header = () =>{
return(
    <div>
    <nav className="navbar navbar-fixed-top">
        <div className="container-fluid">
            <div className="site-nav-wrapper">

                <div className="navbar-header">

                        <a class="navbar-brand smooth-scroll" href="#home">
                        <img src={image} alt="logo"/>
                    </a>
                </div>

                <div className="container">
                    <div className="collapse navbar-collapse">
                        <ul className="nav navbar-nav pull-right">
                            <li><a className="smooth-scroll" href="#01文字文字">01文字文字</a></li>
                            <li><a className="smooth-scroll" href="#02文字文字">02文字文字</a></li>
                            <li><a className="smooth-scroll" href="#03文字文字">03文字文字</a></li>
                            <li><a className="smooth-scroll" href="#04文字文字">04文字文字</a></li>
                            <li><a className="smooth-scroll" href="#Test文字文字">Test文字文字</a></li>
                            <li><a className="smooth-scroll" href="#回首頁"><i class="fas fa-home">回首頁</i></a></li>
                         </ul>
                    </div>
                </div>

            </div>
        </div>
    </nav>
    </div>
);
}

 export default Header
什么显示了<html>？ - le3th4x0rbot
5个回答
5
我觉得这个库react-fontawesome 用于导入fontawesome非常有帮助，有关详细信息请参见用法部分。
您可以使用以下方式轻松导入它。
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

命名方式与fontawesome图标网站上的实际命名略有不同，但相似，只需将fa-coffee更改为faCoffee即可。

0

您可以从this链接下载CSS文件，并将其放置在资产中，然后在需要的地方导入。

import 'assets/fontawesome.css' //Assuming the absolutepath and css file name as fontawesome

如果你想在React中使用CDN，那么你需要创建一个HTML文件，在其中的head标签中添加CDN，并在该HTML文件中渲染React组件。
0

如果你使用的是普通类而不是混淆等技术，那么添加额外库可能会有些过分。

可以在您的index.html.ejs或其他根组件或页眉中添加它们，然后像文档中那样包含它们或使用它们。

 <link rel="stylesheet" 
 href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" 
 integrity="sha384- 
 50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" 
 crossorigin="anonymous">
0
请在您的package.json文件中添加以下依赖项：
"@fortawesome/fontawesome-svg-core": "^1.2.17",
"@fortawesome/free-brands-svg-icons": "^5.8.1",
"@fortawesome/free-regular-svg-icons": "^5.8.1",
"@fortawesome/free-solid-svg-icons": "^5.8.1",
"@fortawesome/react-fontawesome": "^0.1.4",

在执行 npm install 后，您可以像这样在组件中使用图标：

import { faThumbsUp, faThumbsDown } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
...
render() {
    return (
        ...
        <FontAwesomeIcon icon={faThumbsUp} />
0

你可以在这里 react-icons 找到所有的图标和所需的一切。

首先安装 react-icons：

  1. npm install react-icons --save
  2. 如何使用：
import { FaBeer } from 'react-icons/fa';
   class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接