Issue with font awesome version 5. Some icons are not getting rendered. Instead shows animation with question mark and exclamation. If I use version 4 and css it gets rendered. Anyone have this issue ?
<!DOCTYPE html>
<html>
<head>
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
</head>
<body class="body">
<i class="fa fa-google-plus-square"></i>
<i class="fas fa-google-plus-square"></i>
<i class="fas fa-check-square"></i>
</body>
</html>
Here the google-plus-square icon is not rendering. This is how it appears in the browser
Because you are calling wrong class
**This Is Wrong**
<i class="fa fa-google-plus-square"></i>
<i class="fas fa-google-plus-square"></i>
**For Font Awesome 5 Instead of That USe THis**
<i class="fab fa-google-plus-square"></i>
Search Icon From Here
https://fontawesome.com/icons?d=gallery
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Use this link instead of script
Another reason your font-awesome icons are not rendering could be that you are trying to use a Pro icon when you have the fontawesome-free package.
For example, in Font Awesome 6, to use <i class="fa-solid fa-code"></i>, fontawesome-pro package is required.
Related
I am learning how to add Icons to my HTML and there is an example of it from W3 Schools like this :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Which is pretty much to link the stylesheet and be able to enter the icons from Font awesome page. However I do not like the messy way of adding it directly to the HTML . Is there an easier way for beginners to add Icons to the actual CSS instead of the body directly ?
Thank you ,
The easy way is to use fa icons
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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>
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
I can't figure out how to translate this from Bs3 to Bootstrap 4:
<div class="input-group date">
{% include "bootstrap_datepicker_plus/input.html" %}
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
I read that gyphicon has been dropped so I replaced it with fa fa-calendar and added the appropriate stylesheet.
I can't get that button working - which was the glyphicon
As per your question I think you are using Font Awesome Icons
For including font-awesome library follow following link:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Even as per latest Font awesome CDN package 5
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
class for the calendar has been renamed to far fa-calendar as shown in link
It should be like this. Please, note, you haven't stated which version of font-awesome you are using. I assumed this
<div class="input-group date">
{% include "bootstrap_datepicker_plus/input.html" %}
<span class="input-group-addon">
<i class="fa fa-calendar" aria-hidden="true"></i>
</span>
</div>
You may use feather icons from here (Github link here) instead of glyphicons in Bootstrap 4. The following code example might be of some help to you.
<html>
<head>
</head>
<body>
<div data-feather="calendar">Calendar</div>
<!-- Icons -->
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
feather.replace()
</script>
</body>
I've tried re-coding it different ways and I'm not sure why it's not working. I'm trying to make a button that when pressed will send the user to Github all while having a font awesome icon.
<a href="https://github.com/"> <button type="submit"><i class="fa fa-github"
aria-hidden="true">GitHub</i></a>
Try this:
You should have the font awesome installed locally or by CDN
By CDN
You should put this code on the <header>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' type='text/css' media='all' />
HTML
<button onclick="window.location.href='https://github.com/'"><i class="fa fa-github" aria-hidden="true"></i>GitHub</button>
OR
<i class="fa fa-github" aria-hidden="true"></i>GitHub
<html>
<head>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' />
</head>
<body>
<a href="https://github.com/"> <button type="submit"><i class="fa fa-github"
aria-hidden="true">GitHub</i></button></a>
</body>
</html>
So because I was writing this in codepen I had to add a target="_blank" to open the page in a new tab and that fixed the issue.
Thank you for the help