I have this font-awesome icon that I wanted to used for some reason it is not showing.I cannot to figure out why
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-
UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
<div id="boxIcon2">
<i class="fas fa-car"></i>
</div>
Related
I added
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
to index.html
but I can't show the icon on the web page it shows the icon name as a string.
I tried
<span class="material-icons-outlined">
done
</span>
but it does not work.
You can show Material icons on the web page using this code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons" style="font-size:48px;">cloud</i>
<i class="material-icons" style="font-size:60px;color:red;">cloud</i>
</body>
</html>
Example
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<i class="material-icons">cloud</i>
<i class="material-icons" style="font-size:48px;">cloud</i>
<i class="material-icons" style="font-size:60px;color:red;">cloud</i>
I did the exact required steps in the website and still it doesn't work..
<script src="https://use.fontawesome.com/3e91539bf3.js"></script>
<div class="navbar">
<i class="fas fa-user-friends"></i>About Me
<i class="fas fa-person-booth"></i>My Builds
<i class="fas fa-clock"></i>Get in-touch
</div>
give this a try it should work .
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/js/all.min.js"></script>
I can say that's because of the version mismatch, you can try font awesome 4.7 as it is included in bootstrap cdn.
Copy to the head of html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<i class="fa fa-5x fa-cog fa-fw" aria-hidden="true"></i>
<i class="fa fa-camera-retro fa-5x"></i>
</body>
</html>
in my package.json, I have
"dependencies": {
"font-awesome": "^4.7.0"
}
in my html, I have
<link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
If I comment out the second link, none of my font-awesome icons show up and I only get empty rectangles.
in my css, I have
fas fa-circle
Anyone seeing what I am doing wrong?
This is for version 5 and above
In your HTML
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
Then, Use this code
<span><i class="fas fa-circle"></i></span> // for Solid
<span><i class="far fa-circle"></i></span> // for Regular
And, This is for version 4.7.0
In your HTML,
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Then,
<span><i class="fa fa-circle-thin" aria-hidden="true"></i></span>
<span><i class="fa fa-circle" aria-hidden="true"></i></span>
<span><i class="fa fa-circle-o" aria-hidden="true"></i></span>
for version 4.7.0 installed locally, I should use fa instead of fas.
<link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.css">
and the package is
"font-awesome": "^4.7.0"
I can't get the Font Awesome icons to show up. I've tried different CDNs and it does nothing on any browser.
CSS links:
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/theme.min.css">
<link rel="stylesheet" href="assets/css/color-defaults.min.css" media="screen">
<link rel="stylesheet" href="assets/css/swatch-white.min.css" media="screen">
<link rel="stylesheet" href="assets/css/swatch-blue.min.css" media="screen">
<link rel="stylesheet" href="assets/css/swatch-gray.min.css" media="screen">
<link rel="stylesheet" href="assets/css/swatch-black.min.css" media="screen">
<link rel="stylesheet" href="assets/css/swatch-white-black.min.css" media="screen">
<link rel="stylesheet" href="assets/css/swatch-white-green.min.css" media="screen">
<link rel="stylesheet" href="assets/css/swatch-white-red.min.css" media="screen">
<link rel="stylesheet" href="assets/css/fonts.min.css" media="screen">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/primary.css" media="screen">
Font Awesome HTML:
<div class="col-md-4">
<h1 class="h2">Follow</h1>
<hr />
<i class="fa facebook-official fa-lg"></i>
<i class="fa google-plus-square fa-lg"></i>
<i class="fa twitter-square fa-lg"></i>
<i class="fa instagram fa-lg"></i>
</div>
I think you have the wrong classes. Try this:
<div class="col-md-4">
<h1 class="h2">Follow</h1>
<hr />
<i class="fa fa-facebook-official fa-lg"></i>
<i class="fa fa-google-plus-square fa-lg"></i>
<i class="fa fa-twitter-square fa-lg"></i>
<i class="fa fa-instagram fa-lg"></i>
</div>
You need to add fa- before each logo.
Here is an example that you always get form their documentations.
http://fortawesome.github.io/Font-Awesome/icon/archive/
I have linked it correctly adding "http:" before the link since I am using a localHost
<head runat="server">
<title>Brave Watches</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href ="CSS/bootstrap.min.css" rel ="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href ="CSS/custom.css" rel ="stylesheet" />
<link href ="JavaScript/Custom.js" rel="" />
<link rel="stylesheet" type="text/css" href="Cartfiles/assets/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="Cartfiles/assets/css/custom.css"/>
<head/>
And I have added fa before fa-"icon"
<div class ="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
</div>
Still don't understand why it is giving me the blank rectangles.
Thanks in advance!