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
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
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.
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.