如何从 react-icons 包中缩放（大）字体真棒图标

Question

我正在使用 marvelouse react-icons 包（ http://gorangajic.github.io/react-icons/fa.html ），特别是 font awesome 包。

如果这没有反应，那么 我只需在 tag 中添加一个属性，例如：

 <i class="fa fa-camera-retro fa-5x"></i>

但是，如果我将 fa-5x 添加到 FaFolderOpen 标记，它不会做任何事情。如您所见，我正在使用 react-bootstrap，并将图标放置为按钮（应该是块）？

我不得不相信这已经被问过，但我没有通过搜索找到它。

这是它的样子，我想要它更大：

 const React = require('react')
import { Form, FormControl, FormGroup, ControlLabel, Col, Button, Tooltip, OverlayTrigger } from 'react-bootstrap'
import FaFolderOpen from 'react-icons/lib/fa/folder-open'
import FaFileCodeO from 'react-icons/lib/fa/file-code-o'
import FaFolderOpen from 'react-icons/lib/fa/folder-open'
import FaFileCodeO from 'react-icons/lib/fa/file-code-o'

<Button type="button" bsStyle="success" block onClick={(e) => folderChooser(e)}>
     <FaFolderOpen />
</Button>

原文由 Dr.YSG 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果你想要一个 5 倍的图标大小，你需要将它传递给反应类 size

 // Font awesome pixel sizes relative to the multiplier.
// 1x - 14px
// 2x - 28px
// 3x - 42px
// 4x - 56px
// 5x - 70px

<FaFolderOpen size={70} />

如果你注意到它每次跳 14

从 github 自述文件 中，它显示所有内容都被内联覆盖。它渲染一个svg，所以你不能使用 5x 你必须使用像素大小

编辑

几年后回到这一点，使用较新版本的 FontAwesome/ReactIcons 处理不同大小的推荐方法是使用它们的图标提供程序，该提供程序利用 React Context API。这需要 React v16.3+

 import { IconContext } from "react-icons";

<IconContext.Provider value={{ className: "shared-class", size: 70 }}>
  <>
    <FaFolder />
    <FaBeer />
  </>
</IconContext.Provider>

原文由 John Ruddell 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 reactjs 中你可以使用 size = 'with your preferred size which be from sm to lg or 1x to 10x'

这是 font awesome 5 在反应中的例子

<FontAwesomeIcon icon={faBars} size = '10x'/>

原文由 solomon njobvu 发布，翻译遵循 CC BY-SA 4.0 许可协议