How can I set spacing between icons that appear in line? Here's my code:
<p>
<i class="fa fa-facebook fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-google-plus fa-2x"></i>
</p>
The icons are too close to each other for now.
use the fa-fw class:
http://fortawesome.github.io/Font-Awesome/examples/
It's clean, and better than adding a style to your elements.
Just set a margin as you would do for anything else. Pure CSS.
Actually you can use to create a space
<i class="fa fa-home fa-fw"></i> <i class="fa fa-home fa-fw"></i>
Other answers mention the fa-fw class, which works well for a lot of scenarios. However, there are some cases where this is not enough spacing.
For those who use Bootstrap, use me- (margin-right) or ms- (margin-left) classes to specify which side and how much margin.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- Fontsawesome CSS -->
<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" />
<title>Bootstrap 5.0 Fontsawesome Margin Example</title>
</head>
<body>
<h1>No Margin</h1>
<p>
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-google-plus"></i>
</p>
<h1>ME-1</h1>
<p>
<i class="fab fa-facebook me-1"></i>
<i class="fab fa-twitter me-1"></i>
<i class="fab fa-google-plus me-1"></i>
</p>
<h1>ME-2</h1>
<p>
<i class="fab fa-facebook me-2"></i>
<i class="fab fa-twitter me-2"></i>
<i class="fab fa-google-plus me-2"></i>
</p>
<h1>ME-3</h1>
<p>
<i class="fab fa-facebook me-3"></i>
<i class="fab fa-twitter me-3"></i>
<i class="fab fa-google-plus me-3"></i>
</p>
<h1>ME-4</h1>
<p>
<i class="fab fa-facebook me-4"></i>
<i class="fab fa-twitter me-4"></i>
<i class="fab fa-google-plus me-4"></i>
</p>
<h1>ME-5</h1>
<p>
<i class="fab fa-facebook me-5"></i>
<i class="fab fa-twitter me-5"></i>
<i class="fab fa-google-plus me-5"></i>
</p>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.min.js"
integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc"
crossorigin="anonymous"></script>
</body>
</html>
https://getbootstrap.com/docs/5.0/utilities/spacing/#margin-and-padding
Related
I'm watching Traversy Media's SASS Course, and I've got this problem with my icon colour not applying. Here's my HTML:
Does anyone know why the #fff colour isn't applying to my icons?
.icons a {
color: pink;
margin: 0 0.3rem;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="icons my-1">
<i class="fas fa-globe fa-2x"></i>
<i class="fab fa-twitter fa-2x"></i>
<i class="fab fa-facebook fa-2x"></i>
<i class="fab fa-linkedin fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
</div>
You're applying the color to the surround <a> tag, to apply the effect to the inner <i> field you need the following CSS selector:
.icons a i {
color: #fff
}
Otherwise the selector is trying to change the color of the anchor itself, which has no color.
You need to apply the color to the element
.icons a i {
color: #fff;
}
try this:
.icons.my-1 a {
color: white;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="icons my-1">
<i class="fas fa-globe fa-2x"></i>
<i class="fab fa-twitter fa-2x"></i>
<i class="fab fa-facebook fa-2x"></i>
<i class="fab fa-linkedin fa-2x"></i>
<i class="fab fa-instagram fa-2x"></i>
</div>
I don't know why, but nothing was working out, anyways thanks for your help, I just copy pasted the source code from Traversy Media's YouTube Video which is extremely frustrating but can't be helped! Thanks!!
why there is no instagram icon here
.share{
display:inline-block;
color:#0099cc;
font-size:25px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<i class="fab fa-facebook-square share"></i>
<i class="fab fa-instagram-square share"></i>
<i class="fab fa-twitter-square share"></i>
Update the version of the CDN to the lastest one. It was not there in 5.7 and was add starting from 5.12 (https://github.com/FortAwesome/Font-Awesome/blob/master/CHANGELOG.md#5121---2020-02-04)
Added
instagram-square icon FortAwesome/Font-Awesome#9223
.share {
display: inline-block;
color: #0099cc;
font-size: 25px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<i class="fab fa-facebook-square share"></i>
<i class="fab fa-instagram-square share"></i>
<i class="fab fa-twitter-square share"></i>
It seems that fa-instagram-square isn't a part of your .css file.
Please use https://use.fontawesome.com/releases/v5.14.0/css/all.css that includes the fa-instagram-square icon.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
<i class="fab fa-facebook-square share"></i>
<i class="fab fa-instagram-square share"></i>
<i class="fab fa-twitter-square share"></i>
You need to update the cdn version to the latest v5.15.1 since the instagram-square has been introduced in later versions.
.share{
display:inline-block;
color:#0099cc;
font-size:25px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<i class="fab fa-facebook-square share"></i>
<i class="fab fa-instagram-square share"></i>
<i class="fab fa-twitter-square share"></i>
In <head> of index.html I using this links successfully on localhost:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>
but GitHub page shows error for all this links in console ad does not shows content:
Mixed Content: The page at 'https://mypage.net/' was loaded over
HTTPS, but requested an insecure stylesheet
'http://fonts.googleapis.com/css?family=Noto+Sans:400,700'. This
request has been blocked; the content must be served over HTTPS.
if I use:
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<p class="social">
<a target="_blank" href="https://www.youtube.com/channel/MyChannelID?view_as=subscriber">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-youtube fa-stack-1x fa-inverse"></i>
</span>
</a>
<a target="_blank" href="https://github.com/myGitHub">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
<a target="_blank" href="https://www.facebook.com/myFacebook">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</p>
</div>
</div>
</div>
</footer>
The "s" in https stands for "secure". This means your page and your content is encrypted as it's sent over the internet. What's happening is you are calling a non-secure url (http) to load your fonts. To fix this, change the url from "http" to "https":
https://fonts.googleapis.com/css?family=Noto+Sans:400,700
Do this only to change http to https
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<p class="social">
<a target="_blank" href="https://www.youtube.com/channel/MyChannelID?view_as=subscriber">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-youtube fa-stack-1x fa-inverse"></i>
</span>
</a>
<a target="_blank" href="https://github.com/myGitHub">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
<a target="_blank" href="https://www.facebook.com/myFacebook">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</p>
</div>
</div>
</div>
</footer>
Font Awesome is installed, and most icons work. Facebook and Twitter icons, however, do not.
I have tried changing the fa class to fab, and vice versa: neither work.
Here is the code. The top icon renders correctly:
info#site.org <i class="fas fa-envelope" style="margin-left: 5px"></i><br />
#site <i class="fab fa-twitter" style="margin-left: 5px"></i><br />
site <i class="fa fa-facebook" style="margin-left: 5px"></i>
Any suggestions on how to get the social icons working is greatly appreciated!
Fix: This was just a case of not having updated FontAwesome to the latest version, so the icon references were broken. Easy mistake! Hopefully this helps someone.
Icons work properly. Probably you made an error somewhere.
<i class="fab fa-3x fa-facebook"></i>
<i class="fab fa-3x fa-facebook-f"></i>
<i class="fab fa-3x fa-facebook-square"></i>
<i class="fab fa-3x fa-twitter"></i>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/js/all.min.js"></script>
I want to add fa-blogger icon same as fa-github icon. But fa-blogger not working for me .
<link href='https://shefaleechaudhary.github.io/vendor/font-awesome/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
<i class="fa fa-github"></i>
<i class="fa fa-blogger"></i>
<i class="fa fa-blog"></i>
I have referred this . Any help on this will be fantastic.