Source:  Twitter logo

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>

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} />

if you notice it jumps by 14 each time

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

Edit

Coming back to this a few years later, with newer versions of FontAwesome/ReactIcons the recommended way to handle different sizings is with their icon provider that utilizes the React Context API. This requires React v16.3+

import { IconContext } from "react-icons";

<IconContext.Provider value={{ className: "shared-class", size: 70 }}>
  <>
    <FaFolder />
    <FaBeer />
  </>
</IconContext.Provider>
72 users liked answer #0dislike answer #072
John Ruddell profile pic
John Ruddell

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'/>
25 users liked answer #1dislike answer #125
solomon njobvu profile pic
solomon njobvu

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>
4 users liked answer #2dislike answer #24
Raimo Haikari profile pic
Raimo Haikari

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;
}
2 users liked answer #3dislike answer #32
Roman profile pic
Roman

You can use this:

<FaFolderOpen size="4x" />
-5 users liked answer #4dislike answer #4-5
Kanwar Pal Singh profile pic
Kanwar Pal Singh

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).