Square icon when using fontawesome icons

Question

I can't get FontAwesome icons to work. I linked it in the head with:

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

My website has https protocol so that shouldn't be an issue.

I used it in my html like so:

<i class="fas fa-user"></i>

However I can only get them to work when I insert these in my styles this way:

.fa-user:before, .fa-user:after {
    font-family: fontAwesome;
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
}

.fas .fa-user:before,
.fas .fa-user:after {
    content: '\f007';
}

Could you help me figure it out ?

Can you give more details? For example, your complete HTML file? — Thomas Lombart, Mar 19 '19 at 08:30
Are you using the SVG + JS way or the webfont way ? You should use the FontAwesome CDN directly, see the [Start](https://fontawesome.com/start) section of FontAwesome's website. I bet it's not working right now because it can't find the font on your server but it works when you set it up in CSS because you have the font installed on your computer or something along those lines. — Jake, Mar 19 '19 at 08:34

Arshiya Khanam · Accepted Answer · 2019-03-19T08:57:19.530

4

In place of using this

<i class="fa fa-user"></i>

You're using this one

<i class="fas fa-user"></i>

You have to remove s from that icon.

Your giving the link font awesome 4 and using the icon from font awesome 5 that's why it's not working. if you giving the font awesome 4 links so you have to remove s from that icon or else if you don't want to remove s from that icon so you have to use font awesome 5 links.

This is the font awesome 5 link.

 <link rel="stylesheet" 
 href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" 
 integrity="sha384- 
 fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" 
 crossorigin="anonymous">

edited Mar 19 '19 at 08:57

answered Mar 19 '19 at 08:51

Arshiya Khanam

613
6
12

That's another solution!! So do you recommend using font awesome 4 or moving to 5? – Pedro Corchero Murga Mar 19 '19 at 09:03
You can use font awesome 4 or else 5 as dependent on you. but font awesome 5 is the latest version. and some more icons had there in font awesome 5 compare to font awesome 4. – Arshiya Khanam Mar 19 '19 at 09:06

score 1 · Answer 2 · answered Mar 19 '19 at 08:47

1

Worked with:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

answered Mar 19 '19 at 08:47

Pedro Corchero Murga

495
6
19

Square icon when using fontawesome icons

2 Answers2