如何将图标添加到 React Link？

Posted 2023-02-21

【中文标题】如何将图标添加到 React Link？

【英文标题】：How can i add icon to 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()

【参考方案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”端点设置路由