Question

我正在使用react.js建立模板网站。

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

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

我应该如何将CDN放在app.js或header.js中？

CDN：

 <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

Answer 1

我发现此库react-fontawesome对于导入fontawesome非常有用。有关更多信息，请参见usage部分。

您可以像这样简单地导入它

   <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-jdbc</artifactId>
   </dependency>

命名与fontawesome图标网站上的实际命名有些不同，但是类似，因此只需将其从import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faCoffee } from '@fortawesome/free-solid-svg-icons' const element = <FontAwesomeIcon icon={faCoffee} />更改为fa-coffee。

Answer 2

您可以从this链接下载css文件，并将其放置在资产中，然后按需要导入，例如

file_array = ["sample1.txt", "sample2.txt"]

file_array.each do |x|
  file = File.open(x,'r')
  file.each do |h|
  open('result.txt', 'a') do |f|
    puts f << h
  end
  end
  open('result.txt','a') do |f|
    puts f << "\n"
  end
  end

new_array = File.readlines('result.txt').sort
File.open('result.txt','w') do |file|
  new_array.each {|n| file.puts(n)}
end

如果要在react中使用CDN，则需要创建一个html文件并将cdn附加到该文件的头部，然后在该HTML文件中呈现react组件

Answer 3

由于您使用的是常规类，而不是混淆不清的东西，因此添加一个额外的库可能会过头了，

您可以将其添加到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">

Answer 4

在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} />

Answer 5

您将在这里获得所有图标以及所需的一切react-icons 简而言之。

首先安装react-icons

npm install react-icons --save
使用方式：

import { FaBeer } from 'react-icons/fa';
   class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}

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

5 个答案: