我正在使用 marvelouse 反应图标包(http://gorangajic.github.io/react-icons/fa.html http://gorangajic.github.io/react-icons/fa.html),特别是 font Awesome 包。
如果这没有反应,那么我只需向标签添加一个属性 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>
如果你想要 5x 图标大小,你需要将其传递给 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 自述文件 https://github.com/gorangajic/react-icons#configuration它表明一切都被内联覆盖。它呈现一个 svg 所以你不能使用5x
你必须使用像素大小
Edit
几年后回到这个问题,对于较新版本的 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)