How to include a Font Awesome icon in React s render

Question

Whenever I try to use a Font Awesome icon in React s render    it isn t displayed on the resulting web page although it works in normal HTML   render  function         return  lt div gt  lt i class  fa fa-spinner fa-spin  gt no spinner but why lt  i gt  lt  div gt       Here is an live example  http   jsfiddle net pLWS3   Where is the fault

User · Accepted Answer

React uses the className attribute  like the DOM     If you use the development build  and look at the console  there s a warning   You can see this on the jsfiddle      Warning  Unknown DOM property class  Did you mean className

User · Answer

as  Praveen M P  said you can install font-awesome as a package  if you have yarn you can run    yarn add font-awesome   If you don t have yarn do as Praveen said and do   npm install --save font-awesome   this will add the package to your projects dependencies and install the package in your node modules folder  in your App js file add   import  font-awesome css font-awesome min css

User · Answer

In my case I was following the documentation for react-fontawesome package  but they aren t clear about how to call the icon when setting the icons into the library  this is was what I was doing      App js file   import  faCoffee  from   fortawesome pro-light-svg-icons   library add faSearch  faFileSearch  faCoffee        Component file    lt FontAwesomeIcon icon   coffee     gt    But I was getting this error   Then I added the alias when passing the icon prop like    lt FontAwesomeIcon icon    fal    coffee      gt    And it is working  you can find the prefix value in the icon js file  in my case was  faCoffee js

User · Answer

https   github com FortAwesome react-fontawesome install fontawesome  amp  react-fontawesome   npm i --save  fortawesome fontawesome   npm i --save  fortawesome react-fontawesome   npm i --save  fortawesome fontawesome-free-solid   npm i --save  fortawesome fontawesome-free-regular   npm i --save  fortawesome fontawesome-svg-core  then in your component import React    Component   from  react   import   FontAwesomeIcon   from   fortawesome react-fontawesome  import   faCheckSquare  faCoffee   from   fortawesome fontawesome-free-solid  import    App css    class App extends Component     render         return          lt div className  quot App quot  gt           lt h1 gt             lt FontAwesomeIcon icon  faCoffee    gt           lt  h1 gt         lt  div gt                export default App

User · Answer

You need to install the package first   npm install --save react-fontawesome   OR  npm i --save  fortawesome react-fontawesome   Don t forget to use className instead of class   Later on you need to import them in the file where you wanna use them   import  font-awesome css font-awesome min css    or  import FontAwesomeIcon from   fortawesome react-fontawesome

User · Answer

The simplest solution is   Install   npm install --save  fortawesome fontawesome-svg-core npm install --save  fortawesome free-solid-svg-icons npm install --save  fortawesome react-fontawesome   Import   import   FontAwesomeIcon   from   fortawesome react-fontawesome   import   faThumbsUp   from   fortawesome free-solid-svg-icons     Use    lt FontAwesomeIcon icon   faThumbsUp    gt

User · Answer

Checkout react icons pretty dope and worked well

User · Answer

After struggling with this for a while I came up with this procedure  based on Font Awesome s documentation here    As stated  you ll have to install fontawesome  react-fontawesome and fontawesome icons library   npm i --save  fortawesome fontawesome-svg-core npm i --save  fortawesome free-solid-svg-icons npm i --save  fortawesome react-fontawesome   and then import everything to your React app    import   library   from   fortawesome fontawesome-svg-core  import   FontAwesomeIcon   from   fortawesome react-fontawesome  import   faStroopwafel   from   fortawesome free-solid-svg-icons   library add faStroopwafel    Here comes the tricky part    To change or add icons  you ll have to find the available icons in your node modules library   i e     lt your project path gt  node modules  fortawesome free-solid-svg-icons     Each icon has two relevant files   js and  d ts  and the file name indicates the import phrase  pretty obvious      so adding angry  gem and check-mark icons looks like this   import   faStroopwafel  faAngry  faGem  faCheckCircle   from   fortawesome free-solid-svg-icons   library add faStroopwafel  faAngry  faGem  faCheckCircle    To use the icons in your React js code  use    lt FontAwesomeIcon icon icon name  gt    The icon name can be found in the relevant icon s  js file   e g  for faCheckCircle look inside faCheckCircle js for  iconName  variable       var iconName    check-circle           and the React code should look like this    lt FontAwesomeIcon icon check-circle  gt     Goodluck

User · Answer

npm install --save-dev  fortawesome fontawesome-free   in index js   import   fortawesome fontawesome-free css all min css     then use icons like below    import React    Component   from  react    class Like extends Component     state         render         return  lt i className  fas fa-heart  gt  lt  i gt          export default Like

User · Answer

If you are new to React JS and using create-react-app cli command to create the application  then run the following NPM command to include the latest version of font-awesome   npm install --save font-awesome   import font-awesome to your index js file  Just add below line to your index js file   import     node modules font-awesome css font-awesome min css      or   import  font-awesome css font-awesome min css     Don t forget to use className as attribute    render  function         return  lt div gt  lt i className  fa fa-spinner fa-spin  gt no spinner but why lt  i gt  lt  div gt

User · Answer

I was experienced this case  I need the react redux site that should be working perfectly in production    but there was a  strict mode   Shouldn t lunch it with these commands   yarn global add serve serve -s build   Should working with only click the build index html file  When I used fontawesome with npm font-awesome  it was working in development mode but not working in the  strict mode    Here is my solution   public css font-awesome min css public fonts font-awesome eot      other different types of files 4          I copied these files for node module font-awesome         after copied then can delete the font-awesome from package json       in public index html   lt link rel  stylesheet  href   PUBLIC URL  css font-awesome min css  gt    After all of above steps  the fontawesome works NICELY

User · Answer

npm install --save font-awesome  import  font-awesome css font-awesome min css     then   lt i className  fa fa-shopping-cart  style   fontSize 24   gt  lt  i gt             lt span className  badge badge-danger  style   position  absolute   right 5  top 5   gt number of items in cart lt  span gt

User · Answer

You can also use the react-fontawesome icon library  Here s the link  react-fontawesome  From the NPM page  just install via npm   npm install --save react-fontawesome   Require the module   var FontAwesome   require  react-fontawesome      And finally  use the  lt FontAwesome   gt  component and pass in attributes to specify icon and styling   var MyComponent   React createClass     render  function          return          lt FontAwesome         className  super-crazy-colors          name  rocket          size  2x          spin         style    textShadow   0 1px 0 rgba 0  0  0  0 1              gt                   Don t forget to add the font-awesome CSS to index html    lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com font-awesome 4 6 1 css font-awesome min css  gt

User · Answer

Alexander s answer from above really helped me out   I was trying to get social accounts icons in the footer of my app I created with ReactJS so that I could easily add a hover state to them while also having them link my social accounts  This is what I ended up having to do     npm i --save  fortawesome fontawesome-free-brands   Then at the top of my footer component I included this   import React from  react   import    styles Footer css   import FontAwesomeIcon from   fortawesome react-fontawesome   import  faTwitter  faLinkedin  faGithub  from   fortawesome fontawesome-free-brands     My component then looked like this    lt a href  https   github com yourusernamehere  gt     lt FontAwesomeIcon className   font-awesome  icon  faGithub    gt   lt  a gt    Worked like a charm

User · Answer

In case you are looking to include the font awesome library without having to do module imports and npm installs  put this in the head section of your React index html page   public index html  in head section    lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs font-awesome 4 7 0 css font-awesome min css   gt    Then in your component  such as App js  just use standard font awesome class convention  Just remember to use className instead of class    lt button className  btn  gt  lt i className  fa fa-home  gt  lt  i gt  lt  button gt

[reactjs] How to include a Font Awesome icon in React's render()

Examples related to reactjs

Examples related to font-awesome