<link rel="stylesheet" href=b oxwebpage.css>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/fontawesome.css" />
<div class="ram">
<i class="fa-regular fa-info"></i>
</div>
I have no idea how to fix it just shows empty box?
<i class="fa-regular fa-info"></i> is a pro icon, so if you don't have a subscription with FA then it's not going to display for you even if you try to use a different CDN (it'll show an X or nothing at all)
https://fontawesome.com/icons/info?s=regular
I switched it out with solid, they basically look the same but if you absolutely have to have the pro version then you'll have to shell out for it: https://fontawesome.com/plans
<link rel="stylesheet" href=b oxwebpage.css>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="ram">
<i class="fa-solid fa-info"></i>
</div>
You could also cheat it by adding a -webkit-text-stroke: 1px black; (FA icons can be treated as classes) but it's a non-standard feature according to MDN but I think the only people you'll be leaving out are IE users
.fa-info {
font-size: 20px;
-webkit-text-stroke: 1px black;
}
<link rel="stylesheet" href=boxwebpage.css>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="ram">
<i class="fa-solid fa-info"></i>
</div>
Use the following cdn and remove regular from class:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="ram">
<i class="fa fa-info"></i>
</div>
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 working on a front end project where I have to load font awesome icons in my page . I included in my <head> tag the link :
<link rel="stylesheet" type ="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Then I tried loading a picture in my html like <span class="focus-input100 fa"></span>
which I had seen from another post here . However the pic does not load . This is the first time I am using font awesome and I would appreciate your help.
<link rel="stylesheet" type ="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<span class="focus-input100 fa"></span>
EDIT : I check the page console and find the error :
Refused to apply style from 'http://127.0.0.1:5500/HTML_FILES/cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/%E2%80%A6' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i><br/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i><br/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.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>
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>