Question

我已经使用 .jsx 文件创建了 Card组件，并加载了 .js 文件中。它正在工作。在这里我想知道，如何向卡片添加社交媒体图标？

这是一个新的React项目，希望运行mongodb。我已经尝试过使用

npm install -g bower
bower install bootstrap-social.

但是没有用。

const Card = props=>{
    return(

      <div className="card text-center shadow">
          <div className="overflow">
              <img src={props.imgsrc} alt='image 1' className="card-img-top" />
          </div>
          <div className="card-body text-dark">
              <h4 className="card-title">{props.title} </h4>
              <p className="card-text text-secondary">
                  Lorem ipsum dolor sit amet consectetur, 
              </p>
              **<a href="#" className="btn btn-outline-success">Go Anywhere</a>**
          </div>
      </div>  
    );

};

我希望将“ Go Anywhere”按钮上方的内容更改为twitter按钮。并在同一行中放置其他按钮，例如Facebook，Instagram等。

Answer 1

您可以安装任何具有社交图标的图标库。您需要这样做：

npm install react-feather --save( run from the project folder )

import { IconName } from 'react-feather';

react-feather的链接：https://github.com/feathericons/react-feather

希望这会有所帮助！

Answer 2

您可以使用webpack-webfont并将svg自定义图标转换为webfont

您可以从flaticon.com

下载图标

Answer 3

您可以使用React图标enter code here 它由一堆来自字体超赞，材料设计等的图标组成

npm install react-icons

       OR

yarn add react-icons

然后导入您喜欢的图标，例如

import {FaTwitter} from 'react-icons/fa'

您可以在以下位置浏览一堆几个图标：

https://react-icons.github.io/react-icons/

如何将社交媒体图标添加到React组件？

3 个答案: