fa-user-circle-o not working

html font-awesome

10,145

Solution 1

As you can understand from it's name, Font-Awesome has cool font-based approach to use icons. So, including CSS file is not enough. If you want to store your CSS file locally, you should store font files too.

As documented, you should have entire folder (including fonts folder which includes woff, tff etc) on your server.

Copy the entire font-awesome directory into your project.

In the of your html, reference the location to your font-awesome.min.css.

Solution 2

There is no problem with body part of HTML. Surely, it has to be with font-awesome.min.css or its path.

There are two ways to go about this problem:

font-awesome.min.css may not loaded along with your HTML. Check in network tab of chrome DevTools. The path you have provided indicates chrome to look for the CSS file in same directory as the HTML file.
Alternatively, you can provide cdn link for font-awesome.min.css, if you dont want to maintain the CSS by yourself. For this, change link tab in head to below:

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

Solution 3

You have to host the font files too. Go to the fontawesome website and read the related documentation. Font awesome get started

10,145

Author by

Diksha

Updated on June 20, 2022

Comments

Diksha almost 2 years
I want to show user circle icon, I have download a font-awesome css file with version 4.7.0. But this is not working for me. If I use cdn then its working. I am not getting what is the issue in downloaded file. Here my code:
```
<html>
    <head>
        <link href="font-awesome.min.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <i class="fa fa-user-circle-o"></i>
    </body>
</html>
```
Does anyone know what is the issue?