如何从反应图标包中缩放（大）字体 - 令人敬畏的图标

我正在使用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，并将图标放在一个按钮（它应该是一个块）？

我不得不相信这已被问过，但我没有通过搜索找到它。

这里是什么样子的，我希望它更大：

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>

来源

2017-05-03 Dr.YSG

试试这个：''它应该工作，因为'class'是一个保留的关键字，以便应用'css类'我们需要使用'className'。 –

但是，JSX对象包含在中您建议对非反应性应用程序有好处 –

您试图将其扩大或缩小吗？ –

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

// 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你必须使用像素大小

来源

2017-05-03 20:50:51

太棒了，谢谢 –

如何从反应图标包中缩放（大）字体 - 令人敬畏的图标

回答

相关问题