Adding Icons using CSS - html

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>

Related

Font-Awesome version 6 icons not showing

First example is not showing, but second example is showing. Why?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
</head>
<body>
<i class="fa-solid fa-square-info"></i> NOT SHOWING
<i class="fas fa-info-circle"></i> SHOWING
</body>
</html>
This is because the icon fa-solid fa-square-info is a PRO icon and it's not available for use in the free version of font-awesome. So the icon is not rendering. Alternatively you can try using Material Design Icons which is open source and free to use.

Font Awesome Icon not loading properly [duplicate]

This question already has answers here:
Font Awesome Icons Not Showing Up on my webpage I made using Bootstrap4
(3 answers)
Closed 2 years ago.
I have a GitHub Pages site up and I'm using some Font Awesome icons at the bottom. Three of them load, but the last one isn't.
How the stylesheet is linked:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
How the icons are placed:
<a class="btn_social"><i class="fab fa-twitter"></i></a>
<a class="btn_social"><i class="fa fa-twitter"></i></a>
<a class="btn_social"><i class="fab fa-envelope"></i></a>
<a class="btn_social"><i class="fab fa-twitter"></i></a>
I've tried replacing fa with fab and fal but im not sure what these mean or what they do.
I have used your key.
My code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<a class="btn_social"><i class="fab fa-twitter"></i></a>
<a class="btn_social"><i class="fab fa-twitter-square"></i></a>
</body>
</html>
Output
btn_social
I do not have the properties of this. If you need more feedback, please share your code (full).
I hope that the community helps you.

Font-awesome icon displays a box

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

fontawesome 5 some icons are not rendering

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.

Can't display any Glyph from Bootstrap 2.3.2

Based on this code I cannot retrieve any glyphicons in Bootstrap 2.3.2.
What am I missing ?
Thanks!
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap.icon-large.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<a class="btn btn-small" href="#">
<i class="icon-large icon-chat"></i>
</a>
<a class="btn btn-small" href="#">
<i class="icon-large icon-phone"></i>
</a>
<img src="glyphicons.png">
</body>
</html>
bootstrap 2.3.2 uses a png sprite in order to call its icons.
if you'll look inside bootstraps css file you'll see that it's looking for this image under:
url("../img/glyphicons-halflings.png")
whereas your image is on the same level as your css.
either change your png's location to this one (put it in the 'img' folder), or change the css file itself.
Mike.