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>
Related
I was trying to link a URL to an icon, but it somehow made 4 icons although I only wrote once. This is the part where caused the problem
<head>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
<script src="https://use.fontawesome.com/ca04587938.js"></script>
</head>
<body>
<nav class="navBar">
<div class="logoBox">
<a href="https://www.youtube.com">
<i class="fa fa-youtube-square" />
</a>
<span class="title">Youtube</span>
</div>
<div class="iconBox"></div>
</nav>
</body>
And, this is the result
The icon appears multiple times since you forgot to close your <i> tag.
So instead of:
<i class="fa fa-youtube-square">
write:
<i class="fa fa-youtube-square"></i>
I have a CSS issue hiding the text in my side menu and leave the font awesome icons on mobile view, and I can't think of any reasonable solution. I use bootstrap 4
Then code of my sidebar menu
<div class="sidebar">
<a class="active" href="#Link0"><i class="fas fa-walking"></i> Link0</a>
<i class="fas fa-users"></i> Link1
<i class="fas fa-cog"></i> Link2
<i class="fas fa-headset"></i> Link3
</div>
According to the bootstrap manual, I should be able to hide any element between any suitable tag with class="d-SM-none d-MD-block". My problem is that I want the icon on the left-hand side to stay visible for mobile view and hide the text but when I put the text between <div> tags text always appears one line down from the icon. I tried <i> <p> tags and still the same issue and btw the text doesn't hide anyways :D
Any help welcome!
What I tried and didn't work:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<div class="sidebar">
<a class="active" href="#Link0"><i class="fas fa-walking"></i> <div class="d-sm-none d-md-block">Link0</div></a><!--Text is one line down from icon-->
<i class="fas fa-users"></i><p class="d-sm-none d-md-block"> Link1</p><!--Text is one line down from icon-->
<i class="fas fa-cog"></i> Link2
<i class="fas fa-headset"></i> Link3
</div>
The hidding part works fine, the problem is that you try to add some elements that are default display with block (div, p) so replace that by span.
Then don't use class d-md-block as you are in a that has a default display: inline. So you should use class d-md-inline.
Result:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<div class="sidebar">
<a class="active" href="#Link0"><i class="fas fa-walking"></i> <span class="d-sm-none d-md-inline">Link0</span></a><!--Text is one line down from icon-->
<i class="fas fa-users"></i><span class="d-sm-none d-md-inline"> Link1</span><!--Text is one line down from icon-->
<i class="fas fa-cog"></i> Link2
<i class="fas fa-headset"></i> Link3
</div>
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
The problem is that my website aren't shown the Icons. I am a starter and I don't see some error there.
Here is the Code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
and here I tried to use icons:
<div class="navigation">
<ul>
<li>
<a href="#">
<span class="icon"><i class="fas fa-home"></i></span>
<span class="title">Home</span>
</a>
</li>
</ul>
</div>
That is not the full code but I think it should display an icon.
The fas variant doesn't exist in that library. Use fa.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" ntegrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="navigation">
<ul>
<li>
<a href="#">
<span class="icon"><i class="fa fa-home"></i></span>
<span class="title">Home</span>
</a>
</li>
</ul>
</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/