Font awesome icon problem

Good morning house.

Pls I need help on how to use font awesome icon on my visual studio editor.

Unfortunately the awesome icon is not reflecting on my browser.

Is there something am not getting right pls?

Please share a screenshot of your code. It’s not possible to help without knowing exactly what you are doing.

Thanks for the timely response.

How are you loading the fonts in the browser? Are you using the font awesome CDN? Please share that code as well.

Hi @Treasure !

Welcome to the forum!

It is always better to write your code in the forum instead of posting a screenshot.
It is easier to read that way.

Here is how to write code into the forum.

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like

@jwilkins.oboe that’s my fault. I asked for a screenshot.

1 Like

No worries, you’re good :+1:

No I installed the plugin on my code editor.
But none of the icon is reflecting on my browser.

Just sent all the font aweson icon I coded.

Please link to the plugin you are using.

https://fontawesome.com/v4.7/icons/

You can’t use fonts in your editor and expect them to magically load in your browser. Something has to load the fonts in your browser. I need to know what plugin you are using in your editor (not the link to the font awesome website), so that I can determine if the plugin somehow helps to embed the font in your project. If it doesn’t you’ll have to load the fonts into your webpage either by using a link to the font awesome CDN or installing the fonts and serving them with your site. You can see an example of using a CDN here: Font Awesome Intro
This link <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> downloads the fonts into the browser so that they are available for use on the webpage.

I personally use the cdn for font awesome.

It is super easy to use and I have never had any issues with it.
Try using that and seeing what happens.

Ok then.
Will try that tomorrow and get bk to you.

Thank a lot .

Thank you.
Will try that tomorrow.

Pls do I need to create an account with font awesome cdn before I can use it?

You might need to create an account to get the latest version. But you should be able to use the the link I referenced above for testing. You need to place in the head of your HTML before the body tag just like the example from w3schools.

Ok.
Thank you very much.

This was what I saw on my browser after inserting the embedded font code link.

Or is visual studio code not supporting font awesome?
Pls check out my code.

Thanks.

and how do i download the font into the browser so I can use them?

I just tested the cdn on my end with vs code and it works for me.

I grabbed the cdn from cdnjs
I then chose the top one which is version 5.15.3 but they have other versions too.
Clicked the link icon to copy the link tag
Screen Shot 2021-06-10 at 9.00.02 PM

Placed the link tag in the head.

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

And started using it. :grinning:

<i class="fab fa-amazon"></i>