如何将图标添加到 React Link？答案

【问题标题】：How can i add icon to React Link?如何将图标添加到 React Link？
【发布时间】：2021-08-25 09:58:52
【问题描述】：

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

这是我的代码：

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

我的购物车现在就这样显示 cart

【问题讨论】：

这能回答你的问题吗？ How to include a Font Awesome icon in React's render()

标签： html css reactjs font-awesome

【解决方案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

【讨论】：

【解决方案2】：

像这样使用它

<Link to="/cart">
Your font awesome icon here
 {cartItems.length > 0 && (
  <span className="badge">{cartItems.length}</span>
 )}
 </Link>

注意：不要忘记为您的“/cart”端点设置路由

【讨论】：