'how to scale (large) font-awesome icons from the react-icons package

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>

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>

Solution 1:^[1]

In reactjs you can use size = 'with your preferred size which be from sm to lg or 1x to 10x'

this is example for font awesome 5 in react

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

Solution 2:^[2]

If you need to style several icons simultaneously, you can wrap them to IconContext.Provider.

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

Solution 3:^[3]

An approach that is not very explicitly comes from docs (close to @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;
}

Solution 4:^[4]

The default size is 1em. You can change it like this:

import { FcSurvey } from 'react-icons/fc';
<FcSurvey size={'2em'} />

Solution 5:^[5]

I have a designer giving me pixel sizes that don't always correspond to one of FontAwesome's size options. So I'm setting the CSS height.

<FontAwesomeIcon icon={faBars} style={{ height: "20px" }} />

Solution 6:^[6]

React-Icons has a prop called size that can be used to set to any size you want. after importing the react-icon from the react-icon library, you can easily do something like this.

<FaUsers size={'4rem'} />

Solution 7:^[7]

If you control the html yourself that is loaded (or it's just some embed code), try adding the viewport meta tag in the head; for example:

<html>
<head>
  <meta name="viewport"  content="width=device-width, initial-scale=1, maximum-scale=1"/>
</head>
<body>
<script async="" src="https://url-to-the-embed-code-you-are-using"></script>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	solomon njobvu
Solution 2	Raimo Haikari
Solution 3	Roman
Solution 4	JPDevM
Solution 5	Neal Ehardt
Solution 6	Suraj Rao
Solution 7	Eric Kok

'how to scale (large) font-awesome icons from the react-icons package

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]