如何从React Icons包中缩放（大）Font Awesome图标

Question

我正在使用神奇的 react-icons 包 (http://gorangajic.github.io/react-icons/fa.html)，特别是 font awesome 包。

如果这不是 react，那么我会给标签添加一个属性，例如：http://fontawesome.io/examples/

<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

---

尝试使用以下代码：<i className="fa fa-camera-retro fa-5x"></i>，应该可以正常工作，因为class是一个保留关键字，所以要应用css class，我们需要使用className。 - Mayank Shukla

但是JSX对象包含在<FaFolderOpen />中，您建议的方法适用于非React应用程序。 - Dr.YSG

你是想将它放大还是缩小？ - John Ruddell

我想要它更大。 - Dr.YSG

Answer 1

如果你想要 5 倍大小的图标，你需要将其传递给 React 组件作为 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处理不同大小的推荐方法是它们的icon provider，该提供程序利用了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

---

算了，我找到了。在这里 - https://github.com/react-icons/react-icons#configuration 如果将来有其他人寻找它，可以找到它的文档。 - Jarmos

@jarmos 是的，我提供的原始链接来自他们的自述文件，就是你刚刚分享的那个。由于答案最初的编写以来已经更新，所以我觉得没有必要再添加第二次 :) 不过感谢你为未来的路人澄清了这一点！ - John Ruddell

Answer 2

在React中，您可以使用size = '与您喜欢的尺寸匹配，范围从sm到lg或1x到10x'

这是React中Font Awesome 5的示例

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

- solomon njobvu

Answer 3

如果您需要同时为多个图标设置样式，可以将它们包装到 IconContext.Provider 中。

<IconContext.Provider value={{color: 'navy', size: 42}}>
   <FaFacebook />
   <FaGithub />
   <FaLinkedin />
</IconContext.Provider>

- Raimo Haikari

Answer 4

一种不太明显的方法来自文档（接近@Raimo Haikari）：

App.jsx

import {IconContext} from "react-icons";
import { FaBeer } from 'react-icons/fa';
import './App.css'

class App extends component {

return (
  <div>
    <IconContext.Provider value={{ className="myReact-icons"}}>
      <FaBeer />
    </IconContext.Provider>
  </div>);  
}

App.css

.myreact-icons {
  color: red;
  height: 2em;
}

- Roman

Answer 5

默认大小为1em。您可以像这样更改它：

import { FcSurvey } from 'react-icons/fc';
<FcSurvey size={'2em'} />

- JPDevM

Answer 6

补充一下，因为我可以用不同的方法来做到这一点，你也可以使用CSS属性font-size或JSON符号中的fontSize。

在外部文件中使用CSS：

/* style.css */
.bigIcon {
   font-size: 25px;
}

// index.jsx
import { FiPackage } from 'react-icons/fi';
import './style.css';
(...)
<FiPackage className="bigIcon" />

或者（JSON语法）

// index.jsx
import { FiPackage } from 'react-icons/fi';
(...)
<FiPackage style={{fontSize:'25px'}} />

- Telmo Dias

Answer 7

React-Icons 有一个 prop 叫做 size，可以用来设置任何大小。 在从 React-Icons 库导入 react-icon 后，您可以轻松地像这样做。

<FaUsers size={'4rem'} />

- Olami Olasunkanmi

Answer 8

我有一个设计师给我一些像素尺寸，它们并不总是对应FontAwesome的尺寸选项之一。因此，我正在设置CSS高度。

<FontAwesomeIcon icon={faBars} style={{ height: "20px" }} />

- Neal Ehardt

Answer 9

只需在ReactJs中按照这样的方式来增加fontawesome图标的大小。

<FontAwesomeIcon icon={faToggleOn} size='xl' />

- Shadman Fatin

Answer 10

你可以使用这个：

<FaFolderOpen size="4x" />

- Kanwar Pal Singh