One fontawesome icon is rendering while the other isn't?

Question

This is probably a rookie question but I'm stuck with this and have gone through the troubleshooting steps here.

I am using a local copy of fontawesome-all.min.css in my assets which I have imported in main.css as follows:

@import url(fontawesome-all.min.css);

The fontawesome-all.min.css has the fonts I am looking for fa-envelope and fa-graduation-cap. However, when I use them on my webpage, fa-envelope renders but fa-graduation-cap doesn't. Where am I going wrong?

<li><a href="#" class="fa-envelope"><span class="label">Email</span></a></li>
<li><a href="#" class="fa-graduation-cap"><span class="label">Google Scholar</span></a></li>

I had similar issue in the past. please mention your font-awesome version and check if this tag is available in your version. In new version some icons are coming with fab- mix. — Khurram Shaikh, Jan 12 '21 at 07:04

score 1 · Accepted Answer · answered Jan 12 '21 at 07:05

1

Don't add the class on the a tag. Add font-awesome classes inside a <i> tag, like given below:

<li><a href="#"><i class="fas fa-envelope"></i> <span class="label">Email</span></a></li>
<li><a href="#"><i class="fas fa-graduation-cap"></i><span class="label">Google Scholar</span></a></li>

Codepen: https://codepen.io/manaskhandelwal1/pen/NWROWmZ

If you don't have the latest version you can either download this file or use directly also inside the link tag: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css

To get the latest versions classes, visit the official documentation here and just search the icon there and click on it to find all details about it: https://fontawesome.com/icons?d=gallery

answered Jan 12 '21 at 07:05

Manas Khandelwal

3,790
2
11
24

Thanks a ton! Can you also help me understand why it didn't work in the tag but did in the tag? – Vishakha Lall Jan 12 '21 at 08:42
@VishakhaLall Before HTML5 (current version: html5). There were two tag 1.`Some Text` and 2.`Some Text`, these tags were used to make text **Bold** and _Italics_ respectively. – Manas Khandelwal Jan 12 '21 at 09:14
In HTML 5 two new tags were introduced `Some Text` and 2.`Some Text`, Where strong stands for **bold** and em stands for _Emphasized or Italics_. – Manas Khandelwal Jan 12 '21 at 09:15
This thus not mean that `` and `` tag will not work from now, but `strong` and `em` are considers as best practice. – Manas Khandelwal Jan 12 '21 at 09:15
So Font Awesome recommends using `` tag as `i` reference to icon. But it is totally fine to use any tag like you were using the `a` tag. – Manas Khandelwal Jan 12 '21 at 09:15
Example: It is a rule in python that the code should be in proper indentation but it is a best practice that `Constants` should be all caps. – Manas Khandelwal Jan 12 '21 at 09:16

score 0 · Answer 2 · answered Jan 12 '21 at 07:09

0

fa and fas is missing

<ul>
<li><a href="#" class="fa fa-envelope"><span class="label">Email</span></a></li>
<li><a href="#" class="fas fa-graduation-cap"><span class="label">Google Scholar</span></a></li>
</ul>

answered Jan 12 '21 at 07:09

Khurram Shaikh

300
2
14

One fontawesome icon is rendering while the other isn't?

2 Answers2