-2

when I am using font-awesome css file then icon not showing but when I am using CDN and all code same then It works. How? Please someone tell me. My Code Is:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
<!-- <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> -->
<title>Test Page</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>

2 Answers2

0

basically, you may have forgotten to add your fonts folder in the project structure that's why it didn't work.

check out the image. I added the fonts in a folder called webfonts and it works just fine, without the folder it won't even work.

Here is the official documentation talking about hosting font awesome yourself It will explain how it works how to set it and use it. and it is easy to read and very straightforward.

<head>
  <link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet"> <!--load all styles -->
</head>
<body>
  <i class="fas fa-user"></i> <!-- uses solid style -->
  <i class="far fa-user"></i> <!-- uses regular style -->
  <i class="fal fa-user"></i> <!-- uses light style -->
  <!--brand icon-->
  <i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>

and right now it should be up and running without any trouble if you are stuck. do please refer to the documentation link I added in this answer.

And the last thing I wanted to mention is the class names they do change from time to time and from one version to another version you should also check the class names from the official website fontawesome offical to make sure you are up to date with all the changes.

example

Ahmad Dalao
  • 1,968
  • 1
  • 8
  • 14
-2

I don't know if I did anything, but 3 cars show up so that must mean something oh also if your trying to make a fount style work (like comic sans) some web browsers don't run those or it's pc type or something

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<title>Test Page</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>```
Hex
  • 1
  • 3