Using Font Awesome with React on Codepen

Hello,

I am working on a project and made a example of trying to import a Font Awesome Icon.

https://codepen.io/michaelnicol/pen/abVvrwg

import React from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";
import { FontAwesomeIcon } from "https://cdn.skypack.dev/@fortawesome/react-fontawesome"

console.log(window.FontAwesome) // undefined

class Presentational extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
     <FontAwesomeIcon></FontAwesomeIcon>
    )
  }
}

ReactDOM.render(<Presentational />, document.getElementById("root"));

I have come across documentation, such as the official documentation here:

But it always includes how to use NPM install in order to access the icons. I imported on the HTML head using a script tag, and am not sure if this will make it accessible for the JS.

How many I go about doing this?

Check this thread


Side note, I would suggest using CodeSandbox or StackBlitz for React.

1 Like

I tried the following code for the fa-ban:

import React from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";
import { FontAwesomeIcon } from "https://cdn.skypack.dev/@fortawesome/react-fontawesome"
import { library } from "https://cdn.skypack.dev/@fortawesome/fontawesome-svg-core";
import { fab } from "https://cdn.skypack.dev/@fortawesome/free-brands-svg-icons@5.15.3";
library.add(fab)

class Presentational extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div>
     <FontAwesomeIcon icon={["fab","twitter"]}><FontAwesomeIcon/>
     <FontAwesomeIcon icon={["fab","ban"]}><FontAwesomeIcon/>
     </div>
    )
  }
}

ReactDOM.render(<Presentational />, document.getElementById("root"));

fa-ban

Where can I find a list of all official names for the icons? using fa-twitter as twitter works, but not for others such as ban.

Use CodeSandbox, it would have taken no time to install and use by following the docs.


  1. Import fas from free-solid-svg-icons

import { fas } from "https://cdn.skypack.dev/@fortawesome/free-solid-svg-icons@5.15.4";

  1. Add it (the add method takes multiple arguments).

library.add(fab, fas);

  1. Use it (the icon component does not take children <ComponentName />)

<FontAwesomeIcon icon={["fas","ban"]} />

Full code
import React from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";
import { FontAwesomeIcon } from "https://cdn.skypack.dev/@fortawesome/react-fontawesome";
import { library } from "https://cdn.skypack.dev/@fortawesome/fontawesome-svg-core";
import { fab } from "https://cdn.skypack.dev/@fortawesome/free-brands-svg-icons@5.15.3";
import { fas } from "https://cdn.skypack.dev/@fortawesome/free-solid-svg-icons@5.15.4";
library.add(fab, fas);

class Presentational extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <FontAwesomeIcon icon={["fab", "twitter"]} />
        <FontAwesomeIcon icon={["fas", "ban"]} />
      </div>
    );
  }
}

ReactDOM.render(<Presentational />, document.getElementById("root"));

Also, make sure you look at the docs for the version you are using. There are often (breaking) changes between major versions. BTW, I tried to use @next and @6.0.0-beta3 but both seem broken with skypack.