Facebook button problems

Here’s my code for adding a Facebook button to my profile page:

In the HTML -

<button type="social" <i class="fa fa-facebook-official"></i></button>

In the CSS -

<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com"/font-
awesome/4.5.0/css/font-
awesome.min.css"/>

I’ve looked online and have found a few different methods. Nothing has worked for me. What am I not understanding?

Thank you!

go directly to the font awesome website, click on icons and do a search for facebook… they have 3 different styles. when you click on it…it tells you exactly what you need to put to apply the icon class you need. http://fontawesome.io/icon/facebook/

I’ll try it again. Still not working, although now it’s blue again. I’m going to try playing with the class settings.

Thank you!

Hi! Why is <link rel=“stylesheet"
href=”//maxcdn.bootstrapcdn.com"/font-
awesome/4.5.0/css/font-
awesome.min.css"/> in your css? Can you show your code?

2 Likes

Stefani has a good point, it should be on top of your HTML, not in CSS.

Also, always use latest versions. FontAwesome is currently 4.7.0.

Hi

1.) put the link bellow in the head of your html document

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

2.) This is just one option, but it works for me! Just copy/paste it to where you need it and change the link with the link to your page.

<a href="yourfacebooklinkgoeshere" class="btn btn-primary"><i class="fa fa-facebook"></i></a>

1 Like

I understand now to put it in my HTML. Somehow I got the impression that stuff went into CSS.

Thank you so much for your help. I have success!!

Melanie

1 Like

Learning here every day. I’m taking good notes, too.

Thank you so much for your help. It’s working now :slight_smile:
Melanie

It’s working!! Thank you so much :slight_smile:
I’ve put it all in my notes, as well, so I can learn from this.

Melanie

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

Thank you!! I appreciate the advice :slight_smile:

No problem, nice to see a fellow lady programmer here :slight_smile:

Yes!! My father and step-mother were both programmers. She is really excited that I’m getting back into it after all these years.

1 Like

Hi, this solution works for me where I was using React 16 and bootstrap 4 version and I was facing blank icon details when program runs. My problem has been solved after define above link inside index.html.

Thanks a lot for this post.