如何缩放react-icons包中的(大)字体超赞图标

问题描述

我正在使用marvelouse react-icons软件包( http://gorangajic.github. io/react-icons/fa.html )，特别是字体很棒的软件包.

I am using the marvelouse react-icons package (http://gorangajic.github.io/react-icons/fa.html), specifically the font awesome package.

如果这没有反应，那么我只会在标签中添加一个属性，例如:

If this was not react, then I would just add an attribute to the tag, such as:

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

但是，如果我将fa-5x添加到FaFolderOpen标记中，它不会执行任何操作.如您所见，我正在使用react-bootstrap，并将图标放置一个按钮(应该是一个块)?

However, if I add the fa-5x to the FaFolderOpen tag, it does not do anything. As you can see, I am using react-bootstrap, and placing the icon a button (should it be a block)?

我必须相信这个问题曾经被问过，但是我没有通过搜索找到它.

I have to believe this has been asked before, but I did not find it via search.

这是它的外观，我希望它更大:

Here is what it looks like, and I want it larger:

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倍的图标大小，则需要将其作为size

if you want a 5x icon size you need to pass it to the react class as size

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

<FaFolderOpen size={70} />

如果您注意到它每次都会跳14

if you notice it jumps by 14 each time

来自github自述文件，它显示了所有内容都被内联覆盖.其呈现svg，因此您不能使用5x，而必须使用像素大小

from the github readme it shows everything is overridden inline. its rendering a svg so you cant use 5x you have to use a pixel size

这篇关于如何缩放react-icons包中的(大)字体超赞图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！