Here's the folder directory:
File Directory
And here's my code:
<html>
<head>
<title>Comic Web</title>
<link rel="stylesheet" href="/assets/brands/fontawesome.css">
</head>
<body>
<footer>
<div class="footer-contact">
<ul class="contacts">
<li><i class="fab fa-facebook"></i></a></li>
<li><i class="fab fa-google-plus"></i></li>
<li><i class="fab fa-github"></i></li>
</ul>
</div>
</footer>
</body>
</html>
I don't know what's wrong with it although I already follow the guide indicated on the website. Thank you!
Related
I dont know what details do you need. Code is very simple.
<!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://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<ul class="sci">
<li><i class="fab fa-facebook" aria-hidden="true"></i></li>
<li><i class="fab fa-instagram" aria-hidden="true"></i></li>
<li><i class="fab fa-vk" aria-hidden="true"></i></li>
</ul>
</body>
</html>
details details details details details details details details details
change fab to fa. you need to use font-awesome version 5 to use fab
<i class="fa fa-facebook" aria-hidden="true"></i>
or use font-awesome 5 cdn link
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css
fab is not included in the 4.7.0/css/font-awesome.min.css.
Consider using up-to-date 5.15.1 cdn link (provided by cdnjs.com):
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<ul class="sci">
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-instagram" aria-hidden="true"></i></li>
<li><i class="fab fa-vk" aria-hidden="true"></i></li>
</ul>
use latest CSS and JS.
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js
<!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://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js" integrity="sha512-F5QTlBqZlvuBEs9LQPqc1iZv2UMxcVXezbHzomzS6Df4MZMClge/8+gXrKw2fl5ysdk4rWjR0vKS7NNkfymaBQ==" crossorigin="anonymous"></script>
</head>
<body>
<ul class="sci">
<li><i class="fab fa-facebook" aria-hidden="true"></i></li>
<li><i class="fab fa-instagram" aria-hidden="true"></i></li>
<li><i class="fab fa-vk" aria-hidden="true"></i></li>
</ul>
</body>
</html>
You have to get the CDN link from the Font Awesome site. This is what it looks like:
<script src="https://kit.fontawesome.com/9375920.js" crossorigin="anonymous"></script>
(Don't use this one, the ID in there is not valid). Include it in the head of your code and it should work fine.
I am making a webpage using Bootstrap4(CDN) and I intend to use FontAwesome icons for my social media links. However on opening the page I see some blue boxes instead of the icons and they are functional. I just need the icons to be displayed. Any help would be appreciated.
Here are the necessary snippets :
1.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
2.
<ul class="social-icons">
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-quora"></i></li>
<li><i class="fab fa-github"></i></li>
<li><i class="fab fa-envelope"></i></li>
</ul>
Here is what I see...
Since you are using the v4.*.* of font-awesome the prefix class of invoking your desired icon is fa not fab.
fab and fas are for the brand and solid styles in v5.*.* and also, fa is deprecated in this version. You can read more about it here.
so you need to make a change in your script just like this:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ul class="social-icons">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-quora"></i></li>
<li><i class="fa fa-github"></i></li>
<li><i class="fa fa-envelope"></i></li>
</ul>
NOTE: You can upgrade your current version from here.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<ul class="social-icons">
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-quora"></i></li>
<li><i class="fab fa-github"></i></li>
<li><i class="fa fa-envelope"></i></li>
</ul>
The problem is with the CDN you have. Request a Kit by creating an account on fontawesome website. They will give you something like this: <script src="https://kit.fontawesome.com/fc188b5fd5.js" crossorigin="anonymous"></script> or you can simply use this.
For displaying the envelope you need to change from <i class="fab fa-envelope"></i> to <i class="fa fa-envelope"></i>.
I'm currently working in a "Quote Machine" as part of freeCodeCamp projects. I'm trying to use a list to get three list items behaving as buttons, one next to the other by using the bootstrap class "in-line" however it is not working since each of the li occupy one row. This is my code so far with no CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Random Quote Machine</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css"
integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<h1>Random Quote Machine</h1>
<h5>WARNING: These quotes might inspire you</h5>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="quote-box">
<p id="quote">Test quote</p>
<p id="author">Anonimous</p>
</div>
<ul class="col-md-12 list-inline">
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fas fa-quote-left"></i>Get Quote</li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>
And this is the result in the browser:
list-inline not rendering
Thank you in advance for any feedback
You need the list-inline-item class on the items...
<div class="col-md-12">
<ul class="list-inline">
<li class="list-inline-item"><i class="fab fa-twitter"></i></li>
<li class="list-inline-item"><i class="fab fa-facebook-f"></i></li>
<li class="list-inline-item"><i class="fas fa-quote-left"></i>Get Quote</li>
</ul>
</div>
https://www.codeply.com/go/uzJ5wlWfr0
Also, the UL should go inside the col-md-12. See the Bootstrap Documentation.
I am running Font Awesome % on my site (static).
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/solid.css" integrity="sha384-v2Tw72dyUXeU3y4aM2Y0tBJQkGfplr39mxZqlTBDUZAb9BGoC40+rdFCG0m10lXk" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/fontawesome.css" integrity="sha384-q3jl8XQu1OpdLgGFvNRnPdj5VIlCvgsDQTQB6owSOHWlAurxul7f+JpUOVdAiJ5P" crossorigin="anonymous">
......
</head>
<body>
..........fab fa-linkedin"></i>
<a target="_Blank" href="https://www.linkedin.com/in/timsmith25/">LinkedIn</a>
</li>
<li>
<i class="fab fa-github"></i>
<a target="_Blank" href="https://github.com/WebRuin">Github</a>
</li>
<li>
<i class="fab fa-codepen"></i>
<a target="_Blank" href="https://codepen.io/WebRuin/">CodePen</a>
</li>
.....
</body>
</html>
My first thought was that it is happening because I am on localhost:xxx
I have it up on GitHub here: https://webruin.github.io/Resume/
Is this A problem that is known? Am I doing something wrong
As the prefix fab indicates, you want to use brand icons. So you also have to include the .CSS for it. Here's your snippet again with the correct link-tag added:
<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/solid.css" integrity="sha384-v2Tw72dyUXeU3y4aM2Y0tBJQkGfplr39mxZqlTBDUZAb9BGoC40+rdFCG0m10lXk" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/fontawesome.css" integrity="sha384-q3jl8XQu1OpdLgGFvNRnPdj5VIlCvgsDQTQB6owSOHWlAurxul7f+JpUOVdAiJ5P" crossorigin="anonymous">
......
</head>
<body>
..........fab fa-linkedin"></i>
<a target="_Blank" href="https://www.linkedin.com/in/timsmith25/">LinkedIn</a>
</li>
<li>
<i class="fab fa-github"></i>
<a target="_Blank" href="https://github.com/WebRuin">Github</a>
</li>
<li>
<i class="fab fa-codepen"></i>
<a target="_Blank" href="https://codepen.io/WebRuin/">CodePen</a>
</li>
.....
</body>
</html>
I am new in web development. I have downloaded a free template with all sources and trying to change it for having some experience. When i run the template, the fa fa-facebook, fa fa-twitter etc icons are showing codes like f0 98 etc in square and the icons of facebook and twitter are not showing. Kindly help!.
Here is the code to link font-awsome
<link rel="stylesheet" type="text/css" href="libraries/fonts/font-awesome.min.css">
here is the code
<!-- Header Socials -->
<div class="col-md-4 col-sm-12 col-xs-12 header-socials">
<ul class="no-padding">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-pinterest"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
<i class="fa fa-user"></i>Contact Us
</div><!-- / Header Socials -->
Regards!
Akhtar
It doesn't sound like you have fully implemented Font Awesome
Try putting this inside <head>:
<script src="https://use.fontawesome.com/08a9781b65.js" type="text/javascript"></script>