Project
Can anyone help me how to include fontawesome in the html5 and css 3 project?
You need to pick a desired version and pack at their Start page and include a tag into section of your page, e.g.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
Other ways of installing it listed on same page.
Here is a working example:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<span style="font-size: 3em; color: Tomato;">
<i class="fas fa-igloo"></i>
</span>
Related
I have quick question of using fontawesome icon in HTML.
I've tried the solutions to import the kit and link the all.css
<script
src="https://kit.fontawesome.com/"my kit id".js"
crossorigin="anonymous"
></script>
...
<i class="fa-solid fa-xmark"></i>
<script src="css/all.css"></script>
...
<i class="fa-solid fa-xmark"></i>
but it still not worked.I don't understand how to solve this problem
You can easily to use font-awesome by using CDN:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
It should work!
I am trying to use font awesome in my project.
I have followed the instructions on their website on how to download it directly and use it within my project.
Here is how I have included it in my link tags.
<link rel="stylesheet" href="vendors/css/bootstrap.min.css">
<link rel="stylesheet" href="vendors/css/MarkerCluster.css">
<link rel="stylesheet" href="vendors/css/MarkerCluster.Default.css">
<link rel="stylesheet" href="vendors/css/font-awesome.css" />
<link rel="stylesheet" href="vendors/leafletJs/leaflet.css" />
<link rel="stylesheet" href="vendors/css/easy-button.css" />
<link rel="stylesheet" href="vendors/css/leaflet.extra-markers.min.css">
<link rel="stylesheet" href="libs/css/style.css">
My code:
<td class="boldFont"><i class="fas fas-camera-retro fas-lg"></i>Region:</td>
<td id="region"></td>
</tr>
<tr>
<td class="boldFont"><i class="fas fas-camera-retro fas-lg"></i>Subregion:</td>
<td id="sub-region"></td>
</tr>
<tr>
<td class="boldFont"><i class="fas fa-adjust"></i>Population:</td>
<td id="population"></td>
</tr>
2 of the three are showing nothing, whilst one of them shows an empty little box (image below)
What am I doing wrong here exactly?
//UPDATE//
Also, when I add a './' at the beginning of the path I get this message:
"GET http://localhost:8090/project1/vendors/webfonts/fa-solid-900.woff net::ERR_ABORTED 404 (Not Found)".
I am not sure if its worth mentioning, but I am running this on XAMPP. Could that have anything to do with it?
You should place ./ at the beginning of href.
<link rel="stylesheet" href="./vendors/css/bootstrap.min.css">
<link rel="stylesheet" href="./vendors/css/MarkerCluster.css">
<link rel="stylesheet" href="./vendors/css/MarkerCluster.Default.css">
<link rel="stylesheet" href="./vendors/css/font-awesome.css" />
<link rel="stylesheet" href="./vendors/leafletJs/leaflet.css" />
<link rel="stylesheet" href="./vendors/css/easy-button.css" />
<link rel="stylesheet" href="./vendors/css/leaflet.extra-markers.min.css">
<link rel="stylesheet" href="./libs/css/style.css">
Because a path to the css files in your case is read from the index.html file
Example of directories
XAMMP
Try to see if XAMMP will go 1 directory
<link rel="stylesheet" href="/vendors/css/bootstrap.min.css">
Or
<link rel="stylesheet" href="../vendors/css/bootstrap.min.css">
I added the font-awesome CDN Html link from the website and placed in the head, and still, the icon wouldn't show. I'm new to Html and need specific instructions on how to fix this.
I even tried downloading it and linking the file locally but that didn't work.
<head>
<title>Social Media</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<ul>
<li>
<i class="fas fa-search"></i>
</li>
</ul>
The problem here is that the icon fas fa-search is from Fontawesome version 5, but you are loading Fontawesome version 4.7.
Fontawesome 4.7 has instead the fa fa-search icon.
<head>
<title>Social Media</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<ul>
<li>
<i class="fa fa-search" style="font-size:30px;"></i>
</li>
</ul>
Please check first what font you are using i mean latest or old there are old 4.7.0 there are different between fa and fas
Here is the code inside head tag:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous">
In console I'm getting the following:
GET https://use.fontawesome.com/releases/v5.7.1/css/all.css net::ERR_NAME_NOT_RESOLVED
How to solve this?
Maybe problem with your network.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous">
<i class="fas fa-user-edit"></i>
Just started using font-awesome and all my images appear as squares if I use the font-awesome css locally. My code is straightforward:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css" />
<link rel="stylesheet" type="text/css" href="font-awesome.css"/>
</head>
<i class="fa fa-truck"></i>truck
I put the font files in ../fonts/ as it says in the font-awesome.css. I also put the fa which is particular to version 4.0, and I also tried the CDN. However, with the CDN, I don't even get a square, I just get a blank. Anyone have any idea?
Thanks!