react-fa-icon
react-fa-icon
help developer to integrate react.js with font-awesome.
Examples
const FaIcon FaStack = ;
CAUTION Font Awesome CSS is not required, it must be included in HTML or via WebPack manually.
Basic Icons
HTML
JSX
<FaIcon ="camera-retro" />
Larger Icons
HTML
fa-lg fa-2x fa-3x fa-4x fa-5x
JSX
<FaIcon ="camera-retro" ="lg" /><FaIcon ="camera-retro" ="2x" /><FaIcon ="camera-retro" ="3x" /><FaIcon ="camera-retro" ="4x" /><FaIcon ="camera-retro" ="5x" />
Fixed Width Icons
HTML
Home Library Applications Settings
JSX
<div> <a ="#"><FaIcon ="home" /> Home</a> <a ="#"><FaIcon ="book" /> Library</a> <a ="#"><FaIcon ="pencil" /> Applications</a> <a ="#"><FaIcon ="cog" /> Settings</a></div>
List Icons
HTML
List icons can be used as bullets in lists
JSX
<ul ="fa-ul"> <li><FaIcon ="check-square listItem />List icons</li> <li><FaIcon icon=" />can be used</li> <li><FaIcon ="spinner" />as bullets</li> <li><FaIcon ="square" />in lists</li></ul>
Bordered & Pulled Icons
HTML
JSX
<FaIcon ="quote-left" ="3x" ="left" "/>
Animated Icons
HTML
JSX
<FaIcon ="spinner" /><FaIcon ="circle-o-notch" /><FaIcon ="refresh" /><FaIcon ="cog" /><FaIcon ="spinner" />
Rotated & Flipped
HTML
normal fa-rotate-90 fa-rotate-180 fa-rotate-270 fa-flip-horizontal icon-flip-vertical
JSX
<FaIcon ="shield" /><FaIcon ="shield" ="90" /><FaIcon ="shield" ="180" /><FaIcon ="shield" ="270" /><FaIcon ="shield" ="horizontal" /><FaIcon ="shield" ="vertical" />
Stacked Icons
HTML
JSX
<FaStack> <FaIcon ="square-o" ="2x" /> <FaIcon ="twitter" ="1x" /></FaStack> <FaStack> <FaIcon ="circle" ="2x" /> <FaIcon ="flag" ="1x" /> </FaStack> <FaStack> <FaIcon ="square" ="2x" /> <FaIcon ="terminal" ="1x" /> </FaStack> <FaStack> <FaIcon ="camera" ="1x"/> <FaIcon ="ban" ="2x" ="text-danger" /></FaStack>