Solvedreact fontawesome Icons not Working

Only the icons showed in the examples work. I wanted to use copyrights icon and some other ones none of those worked. Just the brand names icons works.

7 Answers

✔️Accepted Answer

Try this

import React from "react";
import FontAwesomeIcon from "@fortawesome/react-fontawesome"
import * as Icons from "@fortawesome/fontawesome-free-solid"

export default class HomeComponent extends React.Component {

  constructor(props) {
    super(props);

    this.state = { greeting: "Hello world :)" };
  }

  render() {
    return (
      <div>
        <p>{this.state.greeting}</p>
        <FontAwesomeIcon icon={Icons.faCopyright} size="6x" />
      </div>
    );
  }
}

Related Issues:

22
react fontawesome Add documentation for Jest mocks
If you are using create-react-app there is an easier way than mocking Create a module that just does...
15
react fontawesome OnClick property on FontAwesomeIcon typescript issue
Can confirm this is not working on latest version Results in: adding Onclick property to FontAwesome...
5
react fontawesome Icons not Working
Try this Only the icons showed in the examples work I wanted to use copyrights icon and some other o...
4
react fontawesome render bug
OK I've uncovered the root cause of this @mlwilkerson this is going to take a compatibility fix in t...
90
Android Iconics Execution failed for task ':app:mergeExtDexDebug'.
Hi I solved the same issue by setting multiDexEnabled true in /android/app/build.gradle like: androi...
9
Font Awesome Composer package for Version 5
Alright we've added composer.json to the master branch Is there a PHP composer package available for...
5
Font Awesome Turbolinks and observeMutations problem
Heads-up: Font Awesome 5.7.0 supports turbolinks out of the box. I have a rails project with turboli...
3
bootstrapcdn Consider asserting a Cross-Origin-Resource-Policy?
I'm going to add the Cross-Origin-Resource-Policy: cross-origin in production later today I have #14...
3
bootstrapcdn sourceMappingURL files 403 response
@gitwith we don't add bootstrap.min.css.map to /latest/ Please choose /3.3.7/ I was just investigati...
1975
react RFClarification: why is setState asynchronous?
So here’s a few thoughts This is not a complete response by any means but maybe this is still more h...
1745
react Preventing rerenders with React.memo and useContext hook.
This is working as designed There is a longer discussion about this in #14110 if you're curious ...
611
react React Fire: Modernizing React DOM
I love every of these points except the className change For latest status see an update from June 5...
561
react How should we set up apps for HMR now that Fast Refresh replaces react-hot-loader?
Okay here goes What Is Fast Refresh? It's a reimplementation of hot reloading with full support from...
413
react Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
You're exporting a React element not a component Change to Alternatively at the call site change <Co...
411
react Trigger simulated input value change for React 16 (after react-dom 15.6.0 updated)?
After some research of react source code I got a hack method for react 16: NOTICE: JUST A HACK ...
378
webpacker localIdentName option moved in css-loader configuration
I faced same issue after upading css-loader but I solved it If you check css-loader readme ...
301
react TypeError: func.apply is not a function / Uncaught TypeError: destroy is not a function
TypeError: destroy is not a function This is the real error and indicates that you're returning a va...
248
react Hooks don't work with yarn link
Workaround: I find it easier than some webpack setup or using yet another package manager (yapm? yan...
214
react Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table>
Just do what the warning suggests: Browsers need the <tbody> tag If it is not in your code then the ...
210
react Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
My library and the create-react-app are relative to each other and I am using npm link Did you read ...
210
react Devtools V4: Where is Highlight Updates?
Highlight Updates was very useful not that much for fixing performance problems (the new Profiler is...
206
react Deprecate `isMounted`
This simple method can be used to add cancel to any promise EDIT: Updated for correctness/completene...
178
react Warning: React.createElement: type is invalid -- expected a string
The error message says you might have mixed up default and named exports is a default export To impo...
177
webpacker Compilation Failed without error message
In case anyone else runs into this I had to set webpack_compile_output: true in webpacker.yml for ra...
174
react useCallback/useEffect support custom comparator
Right now we have no plans to do this Currently we can pass an array as second argument when using u...
173
react Fiber Principles: Contributing To Fiber
Ok so cooperative scheduling might have some benefits over preemptive threads but.. ...
166
react "Did not expect server HTML to contain the text node" due to whitespace in React 16
Ok i solved it. Sorry for the alarm in the static markup template literal i Changed to Eliminated th...
165
react "not wrapped in act(...)" warning triggered by an async change in useEffect; Not sure how to fix.
This is fixed in master; we now have an async version of act() Here's the original issue ...
155
react Make React resilient to DOM mutations from Google Translate
Adding a bit more of information The examples below are based on the ones by @hyperknot and @fritz-c...
155
react How to replace parts of a string with a component?
You can use the split function with a regex and then replace the captured parts like so: Let me know...
122
webpacker Cannot read property 'compile' of undefined when running ./bin/webpack-dev-server
I was having the same issue with: Ruby: 2.4.1 Rails: 5.1.2 Node: 8.9.4 I was following the Readme in...
120
vue Await async component lifecycle hooks
This is the actual code that I want to be awaited: Which would be part of the UserPage component. ...
119
ionic framework Bugs when run ionic cordova run ios --device or use --target options
Hi @fwagner thank you for the good news I already build and upload to production So the problem here...
117
vue Cannot import from a typescript Vue component into another typescript Vue component
This is because you don't have declarations of .vue files then the typescript compiler cannot load t...
113
vite Error: spawn C:\..\node_modules\esbuild\esbuild.exe ENOENT
I know how to fix it Run: node ./node_modules/esbuild/install.js This should be written in package.j...
102
react [React DevTools] Bug: Cannot update a component from inside the function body of a different component.
@samparnell apparently when I encountered this problem I wasn't aware about the changelogs ...
102
webpacker How to run node with flag --max_old_space_size
Perhaps webpacker can offer an option through binstubs to set memory size on demand Another working ...
100
webpacker bin/webpack-dev-server results in Cannot find module 'webpack-cli/bin/config-yargs'
In webpack 4.0.1 we need to run yarn add webpack-cli -D and it works!!! On a fresh Rails 5.1.5 app w...
95
vue v-html does not work with filters
You can use $options.filters : Vue.js version 2.1.3 Reproduction Link https://jsfiddle.net/peterkorg...
91
react Debounce and onChange
@iandunn In your scenario you wouldn't need to debounce onChange related to the text field ...
91
react Q: When should you NOT use React memo?
Can someone please explain (like I'm 5) WHY it's a bad idea to wrap all components in React.memo? If...
90
react native picker select Picker style is not working
I use like this: And working good 🤟🏻 RN 0.55.4 name: react-native-picker-select version: 3.1.1 ...
90
webpacker webpacker 3.2.1 hardcodes uglifyOptions: { ecma: 8 } which ignores Babel target options and breaks IE11 compatibility
We are experiencing the same issue and just fixed it by changing our production.js to ...
89
react Provide more ways to bail out inside Hooks
I would enjoy something like this to avoid unnecessary re-renders: where the second parameter would ...
79
vue [feature] Ability to disable Vue observation
If you need to skip observation for an object/array in data use Object.freeze() on it; You don't nee...
78
webpacker Heroku: can't find executable webpack for gem webpacker (Gem::Exception)
Please run bundle exec rails webpacker:binstubs and commit binstubs to heroku. After upgrading to th...
77
ionic framework Ionic v3 - Runtime Error Uncaught (in promise): removeView was not found
If you call loading.dismiss() manually I don't recommend to use dismissOnPageChange you are probably...
76
webpacker [ts] Property context does not exist on type 'NodeRequire'
I think reinstalling types/webpack-env is enough or installing it if missing Command: npm i -D @type...
76
vue Inject/Provide is not reactive
I'd like to point out two possible solutions to this problem: There is a plugin/mixin now by @LinusB...