reactjs – 如何从react-icons包扩展(大)font-awesome图标

我正在使用marvelouse react-icons包( http://gorangajic.github.io/react-icons/fa.html),特别是字体真棒包.

如果这没有反应,那么I would just add an attribute to the tag,如:

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

但是,如果我将fa-5x添加到FaFolderOpen标记中,它就不会执行任何操作.正如你所看到的,我正在使用react-bootstrap,并将图标设置为一个按钮(它应该是一个块)吗?

我不得不相信以前曾经问过,但我没有通过搜索找到它.

这是它的样子,我希望它更大:

enter image description here

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>

解决方法

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

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

<FaFolderOpen size={70} />

如果你注意到它每次跳跃14

from the github readme显示所有内容都被覆盖.它渲染一个svg所以你不能使用5x你必须使用像素大小

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...