Блог

Я использовал react.js для создания шаблона веб-сайта.

Я начал создавать второй компонент header.js и я столкнулся с проблемой

Я не знаю, как связать шрифт Awesome с react.js

Как я должен поместить этот CDN в where?в 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
 

Я обнаружил, что эта библиотека react-fontawesome очень полезна для импорта fontawesome. Дополнительную информацию см. в разделе использование.

Вы можете просто импортировать его следующим образом

 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

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

Именование немного отличается от фактического именования на сайте fontawesome icon, но оно похоже, поэтому просто измените его с fa-coffee на faCoffee .

Вы можете загрузить файлы css по этой ссылке и поместить их в ресурсы и импортировать там, где это требуется, например

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

И если вы хотите использовать CDN в react, вам нужно создать html-файл и добавить cdn в head того же самого и отобразить компонент react в этом HTML-файле

Поскольку вы используете обычные классы, а не запутываете, а что нет, добавление дополнительной библиотеки может быть излишним,

Вы можете добавить это в свой 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">
 

Добавьте следующие зависимости в свой 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} />
 

Здесь вы получите все иконки и все, что вам нужно, короче говоря, иконки.

сначала установите react-иконки

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