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>
Related
I have these div below taht have a font swesome icon with a circle around them. But they aren't aligned correclty as the width aren't the same, so the text isn't vertically aligned.
Can this be fixed, I remember some class that I could use to fix it, but don't remember the class name.
.circle-icon {
background: #e3f4f6;
padding: 10px;
border-radius: 50%;
}
<div>
<span><i class="fa fa-user fa-lg rating-color mr-2 circle-icon mb-2" aria-hidden="true"></i></span> <span>{{member.reviews}} Like<ng-container *ngIf="member.reviews > 1">s</ng-container> </span>
</div>
<div>
<span><i class="fa fa-star fa-lg rating-color mr-2 circle-icon mb-2" aria-hidden="true"></i></span> <span>{{member.reviews}} Review<ng-container *ngIf="member.reviews > 1">s</ng-container> </span>
</div>
<div>
<span><i class="fa fa-check fa-lg rating-color mr-2 circle-icon" aria-hidden="true"></i></span> <span>Verified</span>
</div>
Use stacking icons: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons
.fa-circle {
color: #e3f4f6;
}
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<div>
<span class="fa-stack fa-1x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-user fa-stack-1x" aria-hidden="true"></i>
</span>
<span>10 Likes</span>
</div>
<div>
<span class="fa-stack fa-1x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-star fa-stack-1x" aria-hidden="true"></i>
</span> <span>8 Reviews </span>
</div>
<div>
<span class="fa-stack fa-1x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-check fa-stack-1x" aria-hidden="true"></i>
</span> <span>Verified</span>
</div>
Works also with the CSS version:
.fa-circle {
color: #e3f4f6;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<div>
<span class="fa-stack fa-1x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-user fa-stack-1x" aria-hidden="true"></i>
</span>
<span>10 Likes</span>
</div>
<div>
<span class="fa-stack fa-1x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-star fa-stack-1x" aria-hidden="true"></i>
</span> <span>8 Reviews </span>
</div>
<div>
<span class="fa-stack fa-1x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-check fa-stack-1x" aria-hidden="true"></i>
</span> <span>Verified</span>
</div>
You can simply use the width atribute and give every cricle-icon the same width.
I'm creating a card in bootstrap with some social media icons (Font-awesome). For some reason all my icons are treated as boxes and have a black outline around them. My hover shadows also wrap around the square rather than the icon itself.
Why does this happen and how can I fix it?
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12 text-center">
<a href="" type="button" class="btn-floating btn-small">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x" style="color:#00aced;"></i>
<i class="fa fa-twitter fa-stack-1x" style="color:#ffffff;"></i>
</span>
</a>
<a href="" type="button" class="btn-floating btn-small">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x" style="color:#0077B5;"></i>
<i class="fa fa-linkedin fa-stack-1x" style="color:#ffffff;"></i>
</span>
</a>
<a href="" type="button" class="btn-floating btn-small">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x" style="color:#171515;"></i>
<i class="fa fa-github fa-stack-1x" style="color:#ffffff;"></i>
</span>
</a>
</div>
The box border is being generated by they type="button" parameter in your anchors, which has a defined -webkit-appearance: button; in bootstrap's stylesheet. So remove that type="button" parameter, or style it as desired.
As for the shadows, if you want them to keep the shape of the icon instead of being boxed, you should either use text-shadow or filter: drop-shadow instead of box-shadow
So I've been trying to do a quick animation that replaces an entire span on hover but I can't seem to get it to work. How should I approach going about replacing a span on hover?
<h1>I need this replaced...</h1>
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
<h1>to this</h1>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
<h1>on hover</h1>
Sample CodePen here.
By changing the :before css properties for the twitter on hover you can achieve the output.
span.fa-stack:hover i.fa-twitter:before{content:"\f024"; color:#fff}
span.fa-stack:hover i.fa-square-o:before{content:"\f111"}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<h1>I need this replaced...</h1>
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
You can achieve this in CSS by combining the :hover and :first-child/:last-child CSS selectors.
.fa-stack.fa-lg:hover :first-child:before {
content: "\f111";
}
.fa-stack.fa-lg:hover :last-child:before {
content: "\f024";
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
I'm having trouble getting the correct styling for my footer. I've managed to get the correct styling for mobile but for tablet and desktop I'm having a few issues. I'm trying to get the social icons to be centred horizontally off to the right-hand side of the footer. I'm not sure why the have the current set location. Any help in figuring this out would be helpful.
This image shows what I'm trying to achieve for the desktop version. I'm not sure how to do it with out using a fixed margin position which isn't what I want to do as it only then works in chrome and then looks bad in other browsers?
enter link description here
<footer>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6">
<p class="copyright text-muted">Copyright © Eat Sleep Kayak 2015</p>
</div>
<div class="footersocialicons col-xs-12 col-sm-6">
<ul class="list-inline">
<li>
<a href="#">
<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>
</li>
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-google fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#">
<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>
</li>
</ul>
</div>
</div>
</div>
</footer>
/* Footer */
#media (max-width:768px){
footer {text-align: center; padding: 5px;}
}
#media (min-width: 769px) {
footer .list-inline {
float: right;
position:relative;top:50% ;
transform:translateY(-50%);
}
footer .copyright {
float: left;
}
}
footer {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
/*background-color: #eee;*/
background-color: #6B6A67;
padding-top: 5px;
}
footer .copyright {
font-size: 14px;
}
footer .list-inline {
height: 100%;
}
Add the class .text-center to this line - <div class="footersocialicons col-xs-12 col-sm-6"> to center everything inside.
Try adding a fixed height and line-height to your footer. You also said you wanted the icons to the right, so you add the .text-right class to do that.
The following centers the footer text and icons horizontally and aligns the icons to the right.
<style>
footer {
height: 60px;
line-height: 60px;
}
</style>
<footer>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6">
<p class="copyright text-muted">Copyright © Eat Sleep Kayak 2015</p>
</div>
<div class="footersocialicons col-xs-12 col-sm-6 text-right">
<ul class="list-inline">
<li>
<a href="#">
<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>
</li>
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-google fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#">
<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>
</li>
</ul>
</div>
</div>
</div>
</footer>
Fiddle: http://jsfiddle.net/timgavin/mas4dg0y/
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