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

Question

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

如果这不是反应，那么我只会向标签添加一个属性，例如：

<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>

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 readme 它显示所有内容都被内联覆盖。它渲染的是 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>

Answer 2

在reactjs中你可以使用

size = 'with your preferred size which be from sm to lg or 1x to 10x'

这是 React 中 font Awesome 5 的示例

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

Answer 3

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

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

Answer 4

一种不太明确的方法来自docs（接近@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;
}

Answer 5

默认尺寸为 1em。你可以这样改变它：

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

Answer 6

React-Icons 有一个名为 size 的属性，可以用来设置你想要的任何大小。 从react-icon库导入react-icon后，你可以轻松地做这样的事情。

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

Answer 7

只是为了补充，因为我能够以不同的方式做到这一点，您还可以使用 JSON 表示法中的 CSS 属性

font-size

或

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'}} />

Answer 8

我有一位设计师给我提供的像素大小并不总是与 FontAwesome 的尺寸选项之一相对应。所以我设置 CSS 高度。

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

Answer 9

只需这样做即可增加 ReactJs 中的 fontawesome 图标的大小

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