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"
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>
Is it only me that cannot render bitcoin and facebook icons in version 5.0.8 ?
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.0.8/css/fontawesome.css">
<i class="fa fa-btc"></i>
<i class="fa fa-bitcoin"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-facebook-f"></i>
You also need to use the brands.css stylesheet in font-awesome 5.0.8. Additionally, you need to make sure your class names are up to date. Try the snippet below:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/brands.css" integrity="sha384-IiIL1/ODJBRTrDTFk/pW8j0DUI5/z9m1KYsTm/RjZTNV8RHLGZXkUDwgRRbbQ+Jh" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/fontawesome.css" integrity="sha384-q3jl8XQu1OpdLgGFvNRnPdj5VIlCvgsDQTQB6owSOHWlAurxul7f+JpUOVdAiJ5P" crossorigin="anonymous">
<i class="fab fa-btc"></i>
<i class="fab fa-bitcoin"></i>
Alternatively, you can just use the all.css stylesheet to include all the styles
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
<i class="fab fa-btc"></i>
<i class="fab fa-bitcoin"></i>
You need to load all the icon type as the bitcoin belong to the brand ones. As you can see below you can choose pack of icon you want to load: https://fontawesome.com/get-started/web-fonts-with-css
You also need to use fab not fa. https://fontawesome.com/how-to-use/web-fonts-with-css
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" >
<i class="fab fa-btc"></i>
<i class="fab fa-bitcoin"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-facebook-f"></i>
This can fix the problem for all fontawesome font types in less then 2 mins. Simple replacement of /font-awesome/5.13.0/css/fontawesome.min.css with /font-awesome/5.13.0/css/all.min.css and also font-awesome/5.13.0/js/fontawesome.min.js with /font-awesome/5.13.0/js/all.min.js can fix this issue. https://youtu.be/_GV_pEmLCLU
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>
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>
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/