How to use font awesome v5.7.2 with html

HTML-CSS
1

I am trying to use font awesome for my HTML project, but all i get is a bordered box with no icon inside

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="testing.css">
	<link rel="stylesheet" type="text/css" href="css/all.css">
	<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
</head>
<body>
	<i class="fab fa-github-square"><a href="https://github.com/willyblackkeez" id="profile-link"></a></i>
	<i class="fab fa-facebook"></i>
</body>
</html>
2

You need to link to it in your head.

Like this:

<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">

<!DOCTYPE html>
<html>
<head>
	<title></title>
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">
	<link rel="stylesheet" type="text/css" href="testing.css">
	<link rel="stylesheet" type="text/css" href="css/all.css">
	<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
</head>
<body>
	<i class="fab fa-github-square"><a href="https://github.com/willyblackkeez" id="profile-link"></a></i>
	<i class="fab fa-facebook"></i>
</body>
</html>

Or, you can download it and link to it locally.

2 Likes
3

I don’t see where you import the FontAwesome.css file.

1 Like
4

image

I used the link you gave me, but it gave me the same result as when i downloaded it and linked it locally.

5

image

This is all the css file inside the css font-awesome folder. From the guide i read on the fontawesome website, i was told to use the

all.css

6

Hmm… something is weird. I’ve used the CDN posted by @DipperDolphin and I created the markup and for me it works… Are you sure that you have the right path to the css files? I can’t think of another reason why it would fail. :thinking:

1 Like
7

That’s odd. When I run it locally it works.

Is your project on GitHub? I can fork it and take a look.

1 Like
8

hmmmm…what could be wrong?

9

Upload the code either on Codepen or Github so we can check it out :slight_smile:

1 Like
10

@DipperDolphin and @Flopet17

I just tried using the codepen editor and it worked. but i still wonder why its not working offline. because i use sublime mostly.

11

Are you trying to load it on localhost without internet connection? It won’t work then as it is linking to the CDN and requires a connection to work.

1 Like
12

There is internet connection

13

Your link is:

<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">

So when you load it from the filesystem, it’s trying to find it at the root of the filesystem. Change the href to use https: at the beginning and you should find it works. As in:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
4 Likes
14

Yes, @chuckadams have reason, you need to put the https prefix

1 Like
15

Out of interest, why can both work when loading the site? I use the first option on my personal site and it loads :confused:

Thanks!

1 Like
16

When you leave off the url scheme, e.g. href="//foo" then it uses the same URL scheme as the page was loaded with. So if it’s file: then it will look for a file, and if it was http, it will use http, and so on. Your personal site is served over http, so it’s correctly fetching by http. Since you’re loading from a file, it’s looking for a file which doesn’t exist on your location. Changing the link to make the URL scheme explicit overrides this default behavior so it always loads over http (or https in this case)

2 Likes
17

wow… it worked, thanks for that notice

18

Thanks so much guys, its now working…i really do appreciate your kind gestures

19

i got into this issue once but its solved already so congratz haha

1 Like