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

IT技术 reactjs font-awesome react-bootstrap
2021-05-10 13:30:01

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

如果这没有react，那么我只需向标签添加一个属性，例如：

<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>
4个回答

如果你想要一个 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 readme它显示所有内容都被内联覆盖。它呈现一个 svg，所以你不能使用5x你必须使用像素大小

在 reactjs 中你可以使用 size = 'with your preferred size which be from sm to lg or 1x to 10x'

这是react中字体真棒 5 的示例 

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

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

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

一种不太明确的方法来自文档（接近@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;
}
其它你可能感兴趣的问题
上一篇PLA 耐化学性？尤其是盐酸，其他酸 下一篇如何删除固件警告