html - 如何向 React Link 添加图标？

Question

我的 html 文件中有一个购物车链接，当我显示它时，它会将“购物车”显示为一个字符串。我想用很棒的字体图标替换“cart”字符串，但由于我使用 React 来实现代码，所以我找不到如何做到这一点。

这是我的代码:

<Link to="/cart">
 Cart
 {cartItems.length > 0 && (
  <span className="badge">{cartItems.length}</span>
 )}
 </Link>

我的购物车目前是这样显示的 cart

Answer 1

您可以尝试以下代码:

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faRandom } from '@fortawesome/free-solid-svg-icons'
import { Link } from 'react-router-dom';

const Example = () => {
     return (
         <div>  
            <Link to="/any-url">
              <FontAwesomeIcon icon={faRandom} size="2x"/> 
              {cartItems.length > 0 && (<span className="badge">{cartItems.length}</span>)}         
            </Link> 
         </div>
     );
 };

要了解更多信息，请查看:Add link to Font Awesome icon in ReactJS