Can I use font awesome as image?

1

Hello everyone.

Here’s my first FCC forum post. Two things.

  1. I know there’s a way to properly link to my CodePen project. I saw this moderator GIF in a few of these posts but unable to find them again. Something about using three ```. (perhaps I misread it for c/ping code instead?).

https://codepen.io/markdeafmcguire/pen/rEjzqj

  1. I noticed somewhere in one of the CodePen projects that were linked in the forum somewhere that it was possible to use a FontAwesome as an image. I’m unable to retrace my steps and find that project so I’m not quite sure if it is possible. Is it?

Any assistance would be great. Thank you in advance. Hopefully, I created the topic correctly. If not, I’m sure the moderator will be glad to edit. :slight_smile:

2

Hi Mark,
The three back ticks are the for the line before and after a block of code. Just give the link for a codepen.
Font Awesome are image replacements since fonts are easier to style and have more options.
Or did you mean to use as a forum avatar?

@markdeafmcguire I didn’t go that far in the @discobot tutorial. Markdown styles your post instead of using the editor icons. When people say code I assume project source code. So if it’s means something else I wind up off point.

1 Like
3

Is there a specific reason you’re trying to use them as images?

I see you have Font Awesome v4.7.0 linked in your CodePen. v4 was font-based, so all the icons are actually fonts like other text. If you use v5, it will use JavaScript to inject SVGs of the icons. If you’d like to use them as an img with the src attribute, you can go to the Font Awesome GitHub repo and grab the address of the raw SVG you are trying to use.

1 Like
4

Excellent. Thanks @tlc35us. I suspected it was a markdown for code but wasn’t quite sure. I guess to be more clear because of my confusion with the @discobot tutorial suggesting that pasting a link would create a “card”. I pasted the link to the CodePen but it didn’t create a card.

Added a screenshot to show what I mean. Thought maybe I was doing something wrong. Perhaps not.

fcc-greeting-link-example
fcc-greeting-link-example2560×1600 552 KB

1 Like
5

Hi! To find out what I can do, say @discobot display help.

6

@chris-tse

Thanks for asking me about why use them as an image. It’s for the Landing Page User Story #2. It’s the last thing I need to do in order to pass.

2. I can see an image within the #header element with a corresponding id=“header-img”. A company logo would make a good image here.

It seemed like a doable workaround using Font Awesome as an image. I struggled with using a generic logo from Pixabay and was impressed with the simple use of Font Awesome icons in the FCC: Product Landing Page and thought it could be a doable workaround.

Thanks for the JavaScript tip with v5. I will have to try that later as that’s my next course to take after I complete the FCC Responsive Web Design Certification. Need to understand JavaScript a little more first.

I suppose uploading a Pixabay logo to a server and use that for the project for now.

1 Like
7

You can probably just get away with using Font Awesome as intended then just wrapping it in a span or div with an id of header-img (unless it actually expects an img tag, it’s been a while and I don’t think I actually completed that project yet).

8

Hmm… think I tried using the span correctly. it did generate an fail message,

#header-img is not an element : expected ‘SPAN’ to equal ‘IMG’

Makes sense what the fail message is expecting. Tried it with this code.

<div class="logo">
          <span id="header-img"></span>
          <div class="icon"><i class="fa fa-3x fa-fire"></i>
</div>

Appreciate the thought though.

1 Like
9

Love the product. I recommend putting top margin on #ID h2 to keep the top of the section beneath the sticky header for in page navigation. Be careful in #feature since you have multiple h2.