Front End Development Libraries Projects - Build a Random Quote Machine - importing external icons/resources in codepen

JavaScript
1

Tell us what’s happening:

I have the code up and working so far, but where I’m stumbling is importing social media icons.

I’ve been trying with bootstrap, importing libraries, and other various experiments.
line 71-73 in JS:

<div class="social-media-buttons">
          
        </div>

Whatever I try, they would not render, unless I use svg, which is kind of ugly tbh and I’d rather not; plus, I’d like to learn how to import stuff like icons from external sources and so far I haven’t had much luck.
Using “import” just breaks the page entirely, using the build-in external scripts/pens feature either doesn’t work, or I don’t know how to access the libraries.

image
image713×517 71.4 KB

This is the first project I’ve had to do offsite of freecodecamp and wasn’t given much instruction.
Implementing the bootstrap lessons from FCC isn’t yielding any results either, and I’d like to not have to re-write the whole thing just because of this one issue because, as I mentioned, I’d like to learn how to import and use external resources.

Thanks in advance for any help

Your code so far

Build a Random Quote Machine (codepen.io)

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36 Edg/119.0.0.0

Challenge Information:

Front End Development Libraries Projects - Build a Random Quote Machine

2

did you look this up already? if not then this should be useful to have a go at it, happy reading css - Using font awesome in codepen - Stack Overflow

3

I’ve stumbled on this thread, too.
I can get them to show up on HTML (following their instructions), but I’ve been coding in the JS/React portion and still getting my bearings on how they talk to each other.
Thanks!

4

In React the attribute is className not class (JSX is JS and class is a reserved word used for classes in JS).

5

Ah, rookie mistake, thanks for catching that.
Still struggling with the icons, tho. Day 4 of troubleshooting the most basic problem, inserting an icon…

6

Created this:

Testing/Troubleshooting (codepen.io)

Just trying to import and display an icon. Any icon.

7

Using the CSS version of Font Awesome and the component library is not the same thing.

import { FontAwesomeIcon } from "https://esm.sh/@fortawesome/react-fontawesome";
import { faTwitter } from "https://esm.sh/@fortawesome/free-brands-svg-icons";

class Question extends React.Component {
  render() {
    return (
      <>
        <FontAwesomeIcon icon={faTwitter} />
        <h3> Lets go for a beer? </h3>
      </>
    );
  }
}

ReactDOM.render(<Question />, document.getElementById("app"));

I would highly recommend not using Codepen for React. Use Stackblitz or Codesandbox instead.

1 Like
8

Thank you!
I can work backwards from here.

Codepen is what the project linked me to:

image
image1123×160 18.1 KB

This is the first time the course gives you freedom off-site, so I stuck with the recommendation. Next project might try Codesandbox.
Again, thank you

9

I know but Codepen is kind of bad with front-end frameworks and the environment is not at all similar to a local experience.

I would use Stackblitz with a Vite React template. That should work with the tests and is a much better experience and much closer to how you would code it locally. You can do that as well by the way, code it locally and then host it on something like Netlify or Vercel.

10

Good to know for the next project, but I suspect codepen will be most people’s first experience coding html/css/JS independently as that’s what FCC linked to.
They might wanna change that, or have an extra course prior teaching you how that all works because up to now it was all done on their site, with everything in the background.
Thanks again for the help, it’s been a frustrating few days hitting a wall at the simplest part, inserting two icons. Will branch out for the next project.

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.