Adding Font Awesome Pro to React App - getting started











up vote
1
down vote

favorite












I'm trying to add Fontawesome pro to my react app.



I've tried almost all of the options on the getting started tab for Font Awesome - and all that is producing is the free brands. So - now I have a mash up of attempts and and currently stuck on following the instructions set out by clodal in this post



I have a package.json with the following dependencies:



"@fortawesome/fontawesome-svg-core": "^1.2.8",
"@fortawesome/pro-light-svg-icons": "^5.5.0",
"@fortawesome/free-solid-svg-icons": "^5.5.0",
"@fortawesome/pro-regular-svg-icons": "^5.5.0",
"@fortawesome/pro-solid-svg-icons": "^5.5.0",
"@fortawesome/react-fontawesome": "^0.1.3",


I have seen this post and note others are struggling to figure out how to get started with font awesome.



I have added global config auth token to my app.



I have read the upgrading instructions here.



Currently - i'm getting an error that says:



 Error: Can't resolve '@fortawesome/pro-brands-svg-icons' in '/Users/18/src/routes/How/components/HowPage'


In that page, I have:



 import React from 'react'
import PropTypes from 'prop-types'
import classes from './HowPage.scss'

import GridContainer from "components/Grid/GridContainer.jsx";
import GridItem from "components/Grid/GridItem.jsx";
import Clearfix from "components/Clearfix/Clearfix.jsx";
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/pro-solid-svg-icons'
import { faTwitter } from '@fortawesome/pro-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export const HowPage = ({ how }) => (
<div className={classes.container}>
<h1 style={headstyle}>How it Works</h1>
<GridContainer justify="center">
<GridItem
xs={12}
sm={8}
md={8}
className={`${classes.mlAuto} ${classes.mrAuto} ${
classes.textCenter
}`}
>
<span>
<i className="fas fa-layer-plus"></i>
</span>
<i className="fal fa-stroopwafel"></i>
<FontAwesomeIcon icon="coffee" />
<i className="fab fa-twitter" />

</GridItem>
</GridContainer>

<pre>{JSON.stringify(how, null, 2)}</pre>
</div>
)

HowPage.propTypes = {
how: PropTypes.object // from enhancer (firestoreConnect + connect)
}

export default HowPage


In my index.html I have:



  <link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">


I have tried adding these import statements to the page on which Im trying to use the fonts (I can't understand the library building instructions).



That produces the errors (expected, given the next issue):



I don't know where to add the following library add call:



library.add(fas, faTwitter)


My app gets initialised via main.js. That page has:



import React from 'react'
import ReactDOM from 'react-dom'
import createStore from './store/createStore'
import { initScripts } from 'utils'
import { version } from '../package.json'
import { env } from './config'
import './styles/core.scss'
// import { library } from '@fortawesome/fontawesome-svg-core'
// import { fal } from '@fortawesome/pro-light-svg-icons'


// Window Variables
// ------------------------------------
window.version = version
window.env = env
initScripts()

// Store Initialization
// ------------------------------------
const initialState = window.___INITIAL_STATE__ || {
firebase: { authError: null }
}
const store = createStore(initialState)

// Render Setup
// ------------------------------------
const MOUNT_NODE = document.getElementById('root')

let render = () => {
const App = require('./containers/App').default
const routes = require('./routes/index').default(store)

ReactDOM.render(<App store={store} routes={routes} />, MOUNT_NODE)
}

// Development Tools
// ------------------------------------
if (__DEV__) {
if (module.hot) {
const renderApp = render
const renderError = error => {
const RedBox = require('redbox-react').default

ReactDOM.render(<RedBox error={error} />, MOUNT_NODE)
}

render = () => {
try {
renderApp()
} catch (e) {
console.error(e) // eslint-disable-line no-console
renderError(e)
}
}

// Setup hot module replacement
module.hot.accept(['./containers/App', './routes/index'], () =>
setImmediate(() => {
ReactDOM.unmountComponentAtNode(MOUNT_NODE)
render()
})
)
}
}

// Let's Go!
// ------------------------------------
if (!__TEST__) render()


I think the instructions want me to write that library add call in there - but I can't understand how to do it.



I have seen this post - this user has figured out how to add code to the app.js file. I think I am stuck on this step. My app.js is in main.js - I don't know where to put the library call and I don't know whether this example means that the user will only have access to the 2 icons named in that post (faSpinnerThird, faCircle).



I am using Material-UI - and can see that it contemplates the use of font awesome icons. I just can't figure out how to set it up.



PS: the contributing guidelines on the GitHub support page ask for questions to be tagged with react-fontawesome. There isn't a tag for that reference - I don't have enough points to create one - maybe someone who does can sort that out.










share|improve this question

















This question has an open bounty worth +50
reputation from Mel ending in 2 days.


This question has not received enough attention.


I'm trying to figure out how to use Font Awesome with a react app (also using material ui). Can't get started!
















  • Shouldn't you have installed also: "@fortawesome/fontawesome-svg-core": "1.2.0"?
    – Colin
    Nov 22 at 0:28










  • Apologies - I have it - the error is still the same: Module not found: Error: Can't resolve '@fortawesome/pro-brands-svg-icons' in '/Users/18/src/routes/How/components/HowPage'
    – Mel
    Nov 22 at 0:40















up vote
1
down vote

favorite












I'm trying to add Fontawesome pro to my react app.



I've tried almost all of the options on the getting started tab for Font Awesome - and all that is producing is the free brands. So - now I have a mash up of attempts and and currently stuck on following the instructions set out by clodal in this post



I have a package.json with the following dependencies:



"@fortawesome/fontawesome-svg-core": "^1.2.8",
"@fortawesome/pro-light-svg-icons": "^5.5.0",
"@fortawesome/free-solid-svg-icons": "^5.5.0",
"@fortawesome/pro-regular-svg-icons": "^5.5.0",
"@fortawesome/pro-solid-svg-icons": "^5.5.0",
"@fortawesome/react-fontawesome": "^0.1.3",


I have seen this post and note others are struggling to figure out how to get started with font awesome.



I have added global config auth token to my app.



I have read the upgrading instructions here.



Currently - i'm getting an error that says:



 Error: Can't resolve '@fortawesome/pro-brands-svg-icons' in '/Users/18/src/routes/How/components/HowPage'


In that page, I have:



 import React from 'react'
import PropTypes from 'prop-types'
import classes from './HowPage.scss'

import GridContainer from "components/Grid/GridContainer.jsx";
import GridItem from "components/Grid/GridItem.jsx";
import Clearfix from "components/Clearfix/Clearfix.jsx";
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/pro-solid-svg-icons'
import { faTwitter } from '@fortawesome/pro-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export const HowPage = ({ how }) => (
<div className={classes.container}>
<h1 style={headstyle}>How it Works</h1>
<GridContainer justify="center">
<GridItem
xs={12}
sm={8}
md={8}
className={`${classes.mlAuto} ${classes.mrAuto} ${
classes.textCenter
}`}
>
<span>
<i className="fas fa-layer-plus"></i>
</span>
<i className="fal fa-stroopwafel"></i>
<FontAwesomeIcon icon="coffee" />
<i className="fab fa-twitter" />

</GridItem>
</GridContainer>

<pre>{JSON.stringify(how, null, 2)}</pre>
</div>
)

HowPage.propTypes = {
how: PropTypes.object // from enhancer (firestoreConnect + connect)
}

export default HowPage


In my index.html I have:



  <link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">


I have tried adding these import statements to the page on which Im trying to use the fonts (I can't understand the library building instructions).



That produces the errors (expected, given the next issue):



I don't know where to add the following library add call:



library.add(fas, faTwitter)


My app gets initialised via main.js. That page has:



import React from 'react'
import ReactDOM from 'react-dom'
import createStore from './store/createStore'
import { initScripts } from 'utils'
import { version } from '../package.json'
import { env } from './config'
import './styles/core.scss'
// import { library } from '@fortawesome/fontawesome-svg-core'
// import { fal } from '@fortawesome/pro-light-svg-icons'


// Window Variables
// ------------------------------------
window.version = version
window.env = env
initScripts()

// Store Initialization
// ------------------------------------
const initialState = window.___INITIAL_STATE__ || {
firebase: { authError: null }
}
const store = createStore(initialState)

// Render Setup
// ------------------------------------
const MOUNT_NODE = document.getElementById('root')

let render = () => {
const App = require('./containers/App').default
const routes = require('./routes/index').default(store)

ReactDOM.render(<App store={store} routes={routes} />, MOUNT_NODE)
}

// Development Tools
// ------------------------------------
if (__DEV__) {
if (module.hot) {
const renderApp = render
const renderError = error => {
const RedBox = require('redbox-react').default

ReactDOM.render(<RedBox error={error} />, MOUNT_NODE)
}

render = () => {
try {
renderApp()
} catch (e) {
console.error(e) // eslint-disable-line no-console
renderError(e)
}
}

// Setup hot module replacement
module.hot.accept(['./containers/App', './routes/index'], () =>
setImmediate(() => {
ReactDOM.unmountComponentAtNode(MOUNT_NODE)
render()
})
)
}
}

// Let's Go!
// ------------------------------------
if (!__TEST__) render()


I think the instructions want me to write that library add call in there - but I can't understand how to do it.



I have seen this post - this user has figured out how to add code to the app.js file. I think I am stuck on this step. My app.js is in main.js - I don't know where to put the library call and I don't know whether this example means that the user will only have access to the 2 icons named in that post (faSpinnerThird, faCircle).



I am using Material-UI - and can see that it contemplates the use of font awesome icons. I just can't figure out how to set it up.



PS: the contributing guidelines on the GitHub support page ask for questions to be tagged with react-fontawesome. There isn't a tag for that reference - I don't have enough points to create one - maybe someone who does can sort that out.










share|improve this question

















This question has an open bounty worth +50
reputation from Mel ending in 2 days.


This question has not received enough attention.


I'm trying to figure out how to use Font Awesome with a react app (also using material ui). Can't get started!
















  • Shouldn't you have installed also: "@fortawesome/fontawesome-svg-core": "1.2.0"?
    – Colin
    Nov 22 at 0:28










  • Apologies - I have it - the error is still the same: Module not found: Error: Can't resolve '@fortawesome/pro-brands-svg-icons' in '/Users/18/src/routes/How/components/HowPage'
    – Mel
    Nov 22 at 0:40













up vote
1
down vote

favorite









up vote
1
down vote

favorite











I'm trying to add Fontawesome pro to my react app.



I've tried almost all of the options on the getting started tab for Font Awesome - and all that is producing is the free brands. So - now I have a mash up of attempts and and currently stuck on following the instructions set out by clodal in this post



I have a package.json with the following dependencies:



"@fortawesome/fontawesome-svg-core": "^1.2.8",
"@fortawesome/pro-light-svg-icons": "^5.5.0",
"@fortawesome/free-solid-svg-icons": "^5.5.0",
"@fortawesome/pro-regular-svg-icons": "^5.5.0",
"@fortawesome/pro-solid-svg-icons": "^5.5.0",
"@fortawesome/react-fontawesome": "^0.1.3",


I have seen this post and note others are struggling to figure out how to get started with font awesome.



I have added global config auth token to my app.



I have read the upgrading instructions here.



Currently - i'm getting an error that says:



 Error: Can't resolve '@fortawesome/pro-brands-svg-icons' in '/Users/18/src/routes/How/components/HowPage'


In that page, I have:



 import React from 'react'
import PropTypes from 'prop-types'
import classes from './HowPage.scss'

import GridContainer from "components/Grid/GridContainer.jsx";
import GridItem from "components/Grid/GridItem.jsx";
import Clearfix from "components/Clearfix/Clearfix.jsx";
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/pro-solid-svg-icons'
import { faTwitter } from '@fortawesome/pro-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export const HowPage = ({ how }) => (
<div className={classes.container}>
<h1 style={headstyle}>How it Works</h1>
<GridContainer justify="center">
<GridItem
xs={12}
sm={8}
md={8}
className={`${classes.mlAuto} ${classes.mrAuto} ${
classes.textCenter
}`}
>
<span>
<i className="fas fa-layer-plus"></i>
</span>
<i className="fal fa-stroopwafel"></i>
<FontAwesomeIcon icon="coffee" />
<i className="fab fa-twitter" />

</GridItem>
</GridContainer>

<pre>{JSON.stringify(how, null, 2)}</pre>
</div>
)

HowPage.propTypes = {
how: PropTypes.object // from enhancer (firestoreConnect + connect)
}

export default HowPage


In my index.html I have:



  <link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">


I have tried adding these import statements to the page on which Im trying to use the fonts (I can't understand the library building instructions).



That produces the errors (expected, given the next issue):



I don't know where to add the following library add call:



library.add(fas, faTwitter)


My app gets initialised via main.js. That page has:



import React from 'react'
import ReactDOM from 'react-dom'
import createStore from './store/createStore'
import { initScripts } from 'utils'
import { version } from '../package.json'
import { env } from './config'
import './styles/core.scss'
// import { library } from '@fortawesome/fontawesome-svg-core'
// import { fal } from '@fortawesome/pro-light-svg-icons'


// Window Variables
// ------------------------------------
window.version = version
window.env = env
initScripts()

// Store Initialization
// ------------------------------------
const initialState = window.___INITIAL_STATE__ || {
firebase: { authError: null }
}
const store = createStore(initialState)

// Render Setup
// ------------------------------------
const MOUNT_NODE = document.getElementById('root')

let render = () => {
const App = require('./containers/App').default
const routes = require('./routes/index').default(store)

ReactDOM.render(<App store={store} routes={routes} />, MOUNT_NODE)
}

// Development Tools
// ------------------------------------
if (__DEV__) {
if (module.hot) {
const renderApp = render
const renderError = error => {
const RedBox = require('redbox-react').default

ReactDOM.render(<RedBox error={error} />, MOUNT_NODE)
}

render = () => {
try {
renderApp()
} catch (e) {
console.error(e) // eslint-disable-line no-console
renderError(e)
}
}

// Setup hot module replacement
module.hot.accept(['./containers/App', './routes/index'], () =>
setImmediate(() => {
ReactDOM.unmountComponentAtNode(MOUNT_NODE)
render()
})
)
}
}

// Let's Go!
// ------------------------------------
if (!__TEST__) render()


I think the instructions want me to write that library add call in there - but I can't understand how to do it.



I have seen this post - this user has figured out how to add code to the app.js file. I think I am stuck on this step. My app.js is in main.js - I don't know where to put the library call and I don't know whether this example means that the user will only have access to the 2 icons named in that post (faSpinnerThird, faCircle).



I am using Material-UI - and can see that it contemplates the use of font awesome icons. I just can't figure out how to set it up.



PS: the contributing guidelines on the GitHub support page ask for questions to be tagged with react-fontawesome. There isn't a tag for that reference - I don't have enough points to create one - maybe someone who does can sort that out.










share|improve this question















I'm trying to add Fontawesome pro to my react app.



I've tried almost all of the options on the getting started tab for Font Awesome - and all that is producing is the free brands. So - now I have a mash up of attempts and and currently stuck on following the instructions set out by clodal in this post



I have a package.json with the following dependencies:



"@fortawesome/fontawesome-svg-core": "^1.2.8",
"@fortawesome/pro-light-svg-icons": "^5.5.0",
"@fortawesome/free-solid-svg-icons": "^5.5.0",
"@fortawesome/pro-regular-svg-icons": "^5.5.0",
"@fortawesome/pro-solid-svg-icons": "^5.5.0",
"@fortawesome/react-fontawesome": "^0.1.3",


I have seen this post and note others are struggling to figure out how to get started with font awesome.



I have added global config auth token to my app.



I have read the upgrading instructions here.



Currently - i'm getting an error that says:



 Error: Can't resolve '@fortawesome/pro-brands-svg-icons' in '/Users/18/src/routes/How/components/HowPage'


In that page, I have:



 import React from 'react'
import PropTypes from 'prop-types'
import classes from './HowPage.scss'

import GridContainer from "components/Grid/GridContainer.jsx";
import GridItem from "components/Grid/GridItem.jsx";
import Clearfix from "components/Clearfix/Clearfix.jsx";
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/pro-solid-svg-icons'
import { faTwitter } from '@fortawesome/pro-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export const HowPage = ({ how }) => (
<div className={classes.container}>
<h1 style={headstyle}>How it Works</h1>
<GridContainer justify="center">
<GridItem
xs={12}
sm={8}
md={8}
className={`${classes.mlAuto} ${classes.mrAuto} ${
classes.textCenter
}`}
>
<span>
<i className="fas fa-layer-plus"></i>
</span>
<i className="fal fa-stroopwafel"></i>
<FontAwesomeIcon icon="coffee" />
<i className="fab fa-twitter" />

</GridItem>
</GridContainer>

<pre>{JSON.stringify(how, null, 2)}</pre>
</div>
)

HowPage.propTypes = {
how: PropTypes.object // from enhancer (firestoreConnect + connect)
}

export default HowPage


In my index.html I have:



  <link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">


I have tried adding these import statements to the page on which Im trying to use the fonts (I can't understand the library building instructions).



That produces the errors (expected, given the next issue):



I don't know where to add the following library add call:



library.add(fas, faTwitter)


My app gets initialised via main.js. That page has:



import React from 'react'
import ReactDOM from 'react-dom'
import createStore from './store/createStore'
import { initScripts } from 'utils'
import { version } from '../package.json'
import { env } from './config'
import './styles/core.scss'
// import { library } from '@fortawesome/fontawesome-svg-core'
// import { fal } from '@fortawesome/pro-light-svg-icons'


// Window Variables
// ------------------------------------
window.version = version
window.env = env
initScripts()

// Store Initialization
// ------------------------------------
const initialState = window.___INITIAL_STATE__ || {
firebase: { authError: null }
}
const store = createStore(initialState)

// Render Setup
// ------------------------------------
const MOUNT_NODE = document.getElementById('root')

let render = () => {
const App = require('./containers/App').default
const routes = require('./routes/index').default(store)

ReactDOM.render(<App store={store} routes={routes} />, MOUNT_NODE)
}

// Development Tools
// ------------------------------------
if (__DEV__) {
if (module.hot) {
const renderApp = render
const renderError = error => {
const RedBox = require('redbox-react').default

ReactDOM.render(<RedBox error={error} />, MOUNT_NODE)
}

render = () => {
try {
renderApp()
} catch (e) {
console.error(e) // eslint-disable-line no-console
renderError(e)
}
}

// Setup hot module replacement
module.hot.accept(['./containers/App', './routes/index'], () =>
setImmediate(() => {
ReactDOM.unmountComponentAtNode(MOUNT_NODE)
render()
})
)
}
}

// Let's Go!
// ------------------------------------
if (!__TEST__) render()


I think the instructions want me to write that library add call in there - but I can't understand how to do it.



I have seen this post - this user has figured out how to add code to the app.js file. I think I am stuck on this step. My app.js is in main.js - I don't know where to put the library call and I don't know whether this example means that the user will only have access to the 2 icons named in that post (faSpinnerThird, faCircle).



I am using Material-UI - and can see that it contemplates the use of font awesome icons. I just can't figure out how to set it up.



PS: the contributing guidelines on the GitHub support page ask for questions to be tagged with react-fontawesome. There isn't a tag for that reference - I don't have enough points to create one - maybe someone who does can sort that out.







reactjs font-awesome font-awesome-5






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 23 at 23:59

























asked Nov 21 at 23:49









Mel

68372879




68372879






This question has an open bounty worth +50
reputation from Mel ending in 2 days.


This question has not received enough attention.


I'm trying to figure out how to use Font Awesome with a react app (also using material ui). Can't get started!








This question has an open bounty worth +50
reputation from Mel ending in 2 days.


This question has not received enough attention.


I'm trying to figure out how to use Font Awesome with a react app (also using material ui). Can't get started!














  • Shouldn't you have installed also: "@fortawesome/fontawesome-svg-core": "1.2.0"?
    – Colin
    Nov 22 at 0:28










  • Apologies - I have it - the error is still the same: Module not found: Error: Can't resolve '@fortawesome/pro-brands-svg-icons' in '/Users/18/src/routes/How/components/HowPage'
    – Mel
    Nov 22 at 0:40


















  • Shouldn't you have installed also: "@fortawesome/fontawesome-svg-core": "1.2.0"?
    – Colin
    Nov 22 at 0:28










  • Apologies - I have it - the error is still the same: Module not found: Error: Can't resolve '@fortawesome/pro-brands-svg-icons' in '/Users/18/src/routes/How/components/HowPage'
    – Mel
    Nov 22 at 0:40
















Shouldn't you have installed also: "@fortawesome/fontawesome-svg-core": "1.2.0"?
– Colin
Nov 22 at 0:28




Shouldn't you have installed also: "@fortawesome/fontawesome-svg-core": "1.2.0"?
– Colin
Nov 22 at 0:28












Apologies - I have it - the error is still the same: Module not found: Error: Can't resolve '@fortawesome/pro-brands-svg-icons' in '/Users/18/src/routes/How/components/HowPage'
– Mel
Nov 22 at 0:40




Apologies - I have it - the error is still the same: Module not found: Error: Can't resolve '@fortawesome/pro-brands-svg-icons' in '/Users/18/src/routes/How/components/HowPage'
– Mel
Nov 22 at 0:40












2 Answers
2






active

oldest

votes

















up vote
0
down vote













According to the "importing icons" documentation, there is no @fortawesome/pro-brands-svg-icons. There is only @fortawesome/free-brands-svg-icons.






share|improve this answer





















  • Thanks @AndyRay - I just tried that - but still get this error: Module not found: Error: Can't resolve '@fortawesome/free-brands-svg-icons' in
    – Mel
    Nov 23 at 23:36












  • note the react-fontawesome package does have pro-icons: github.com/FortAwesome/react-fontawesome - but I tried your suggestion and still get errors
    – Mel
    Nov 23 at 23:45










  • did you install @fortawesome/free-brands-svg-icons ?
    – Andy Ray
    Nov 23 at 23:51










  • yes -i now have both free and pro installed
    – Mel
    Nov 23 at 23:52










  • neither call works using i className or the react-fontawesome call - they both don't work
    – Mel
    Nov 23 at 23:53


















up vote
0
down vote



accepted










For others struggling with FA in React - PKK's answer on this post helped me How to integrate FontAwesome 5 Pro with React?



However, it doesn't seem to work with 2 word icon names. But - at least it works for many icons. I always thought of FA as plug and play - this has been many hours in figuring out how to get it to work.






share|improve this answer





















    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














     

    draft saved


    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53422042%2fadding-font-awesome-pro-to-react-app-getting-started%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    0
    down vote













    According to the "importing icons" documentation, there is no @fortawesome/pro-brands-svg-icons. There is only @fortawesome/free-brands-svg-icons.






    share|improve this answer





















    • Thanks @AndyRay - I just tried that - but still get this error: Module not found: Error: Can't resolve '@fortawesome/free-brands-svg-icons' in
      – Mel
      Nov 23 at 23:36












    • note the react-fontawesome package does have pro-icons: github.com/FortAwesome/react-fontawesome - but I tried your suggestion and still get errors
      – Mel
      Nov 23 at 23:45










    • did you install @fortawesome/free-brands-svg-icons ?
      – Andy Ray
      Nov 23 at 23:51










    • yes -i now have both free and pro installed
      – Mel
      Nov 23 at 23:52










    • neither call works using i className or the react-fontawesome call - they both don't work
      – Mel
      Nov 23 at 23:53















    up vote
    0
    down vote













    According to the "importing icons" documentation, there is no @fortawesome/pro-brands-svg-icons. There is only @fortawesome/free-brands-svg-icons.






    share|improve this answer





















    • Thanks @AndyRay - I just tried that - but still get this error: Module not found: Error: Can't resolve '@fortawesome/free-brands-svg-icons' in
      – Mel
      Nov 23 at 23:36












    • note the react-fontawesome package does have pro-icons: github.com/FortAwesome/react-fontawesome - but I tried your suggestion and still get errors
      – Mel
      Nov 23 at 23:45










    • did you install @fortawesome/free-brands-svg-icons ?
      – Andy Ray
      Nov 23 at 23:51










    • yes -i now have both free and pro installed
      – Mel
      Nov 23 at 23:52










    • neither call works using i className or the react-fontawesome call - they both don't work
      – Mel
      Nov 23 at 23:53













    up vote
    0
    down vote










    up vote
    0
    down vote









    According to the "importing icons" documentation, there is no @fortawesome/pro-brands-svg-icons. There is only @fortawesome/free-brands-svg-icons.






    share|improve this answer












    According to the "importing icons" documentation, there is no @fortawesome/pro-brands-svg-icons. There is only @fortawesome/free-brands-svg-icons.







    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Nov 23 at 23:32









    Andy Ray

    16.9k66098




    16.9k66098












    • Thanks @AndyRay - I just tried that - but still get this error: Module not found: Error: Can't resolve '@fortawesome/free-brands-svg-icons' in
      – Mel
      Nov 23 at 23:36












    • note the react-fontawesome package does have pro-icons: github.com/FortAwesome/react-fontawesome - but I tried your suggestion and still get errors
      – Mel
      Nov 23 at 23:45










    • did you install @fortawesome/free-brands-svg-icons ?
      – Andy Ray
      Nov 23 at 23:51










    • yes -i now have both free and pro installed
      – Mel
      Nov 23 at 23:52










    • neither call works using i className or the react-fontawesome call - they both don't work
      – Mel
      Nov 23 at 23:53


















    • Thanks @AndyRay - I just tried that - but still get this error: Module not found: Error: Can't resolve '@fortawesome/free-brands-svg-icons' in
      – Mel
      Nov 23 at 23:36












    • note the react-fontawesome package does have pro-icons: github.com/FortAwesome/react-fontawesome - but I tried your suggestion and still get errors
      – Mel
      Nov 23 at 23:45










    • did you install @fortawesome/free-brands-svg-icons ?
      – Andy Ray
      Nov 23 at 23:51










    • yes -i now have both free and pro installed
      – Mel
      Nov 23 at 23:52










    • neither call works using i className or the react-fontawesome call - they both don't work
      – Mel
      Nov 23 at 23:53
















    Thanks @AndyRay - I just tried that - but still get this error: Module not found: Error: Can't resolve '@fortawesome/free-brands-svg-icons' in
    – Mel
    Nov 23 at 23:36






    Thanks @AndyRay - I just tried that - but still get this error: Module not found: Error: Can't resolve '@fortawesome/free-brands-svg-icons' in
    – Mel
    Nov 23 at 23:36














    note the react-fontawesome package does have pro-icons: github.com/FortAwesome/react-fontawesome - but I tried your suggestion and still get errors
    – Mel
    Nov 23 at 23:45




    note the react-fontawesome package does have pro-icons: github.com/FortAwesome/react-fontawesome - but I tried your suggestion and still get errors
    – Mel
    Nov 23 at 23:45












    did you install @fortawesome/free-brands-svg-icons ?
    – Andy Ray
    Nov 23 at 23:51




    did you install @fortawesome/free-brands-svg-icons ?
    – Andy Ray
    Nov 23 at 23:51












    yes -i now have both free and pro installed
    – Mel
    Nov 23 at 23:52




    yes -i now have both free and pro installed
    – Mel
    Nov 23 at 23:52












    neither call works using i className or the react-fontawesome call - they both don't work
    – Mel
    Nov 23 at 23:53




    neither call works using i className or the react-fontawesome call - they both don't work
    – Mel
    Nov 23 at 23:53












    up vote
    0
    down vote



    accepted










    For others struggling with FA in React - PKK's answer on this post helped me How to integrate FontAwesome 5 Pro with React?



    However, it doesn't seem to work with 2 word icon names. But - at least it works for many icons. I always thought of FA as plug and play - this has been many hours in figuring out how to get it to work.






    share|improve this answer

























      up vote
      0
      down vote



      accepted










      For others struggling with FA in React - PKK's answer on this post helped me How to integrate FontAwesome 5 Pro with React?



      However, it doesn't seem to work with 2 word icon names. But - at least it works for many icons. I always thought of FA as plug and play - this has been many hours in figuring out how to get it to work.






      share|improve this answer























        up vote
        0
        down vote



        accepted







        up vote
        0
        down vote



        accepted






        For others struggling with FA in React - PKK's answer on this post helped me How to integrate FontAwesome 5 Pro with React?



        However, it doesn't seem to work with 2 word icon names. But - at least it works for many icons. I always thought of FA as plug and play - this has been many hours in figuring out how to get it to work.






        share|improve this answer












        For others struggling with FA in React - PKK's answer on this post helped me How to integrate FontAwesome 5 Pro with React?



        However, it doesn't seem to work with 2 word icon names. But - at least it works for many icons. I always thought of FA as plug and play - this has been many hours in figuring out how to get it to work.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 24 at 9:54









        Mel

        68372879




        68372879






























             

            draft saved


            draft discarded



















































             


            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53422042%2fadding-font-awesome-pro-to-react-app-getting-started%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            What visual should I use to simply compare current year value vs last year in Power BI desktop

            How to ignore python UserWarning in pytest?

            Alexandru Averescu