I am trying to make a social media menu, the Font Awesome Icons are all visible and the way I want but the hyperlink is not working on it.....
Here is my code:
.sm-list {
display: flex;
}
.sm-link {
color: #929FC5;
width: 3rem;
height: 3rem;
border: 1px solid #929FC5;
border-radius: 90%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 0.5rem;
}
.sm-link:last-child {
margin-right: 0;
}
.sm-link:hover {
background-image: linear-gradient(to right, #A971FF, #00F0FF);
color: #FFF;
}
<div class="sm-list">
<a href="https://www.facebook.com/" class="sm-link">
<i class="fab fa-facebook"></i>
</a>
<a href="https://www.instagram.com/" class="sm-link">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.twitter.com/" class="sm-link">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.youtube.com/" class="sm-link">
<i class="fab fa-youtube"></i>
</a>
</div>
I was able to load the icons with the following code. You must first load the Font Awesome in the head tag
<head>
<link rel="stylesheet" href="mystyle.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
</head>
<body>
<div class="sm-list">
<a href="https://www.facebook.com/" class="sm-link">
<i class="fab fa-facebook"></i>
</a>
<a href="https://www.instagram.com/" class="sm-link">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.twitter.com/" class="sm-link">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.youtube.com/" class="sm-link">
<i class="fab fa-youtube"></i>
</a>
</div>
</body>
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!!
I have this list of icons (fonts) lined up on the bottom of a section's page. On mobile, the line of icons overflows over on the right of that page. I would like to have 3 or 4 icons per row instead on smaller screen. I have tried multiple possibilities and the best I got was the line to be cut off (not having all icons show). Any cue would be greatly appreciated, I don't know what I'm doing wrong :-/
HTML:
<!--Skills-->
<div class="container">
<div class="icons text-center">
<ul>
<li><i class="fab fa-html5"></i></li>
<li><i class="fab fa-css3-alt"></i></li>
<li><i class="fab fa-js"></i></li>
<li><i class="fab fa-bootstrap"></i></li>
<li><i class="fab fa-sass"></i></li>
<li><i class="fab fa-less"></i></li>
<li><i class="fab fa-github"></i></li>
<li><i class="fab fa-wordpress"></i></li>
<li><i class="fab fa-adobe"></i></li>
<li><i class="fab fa-python"></i></li>
</ul>
</div>
</div>
As for CSS:
/*Skills*/
.icons {
padding: 0px 0px;
}
ul {
padding: 0;
margin: 0;
display: flex;
justify-content:space-around;
width: 700px;
margin-left: auto;
margin-right: auto;
}
ul li {
list-style: none;
font-size: 30px;
border-radius: 400px;
width: 50px;
height: 50px;
display: block;
text-align: center;
padding-top: 4px;
padding-bottom: 0px;
color: #2c3e50;
}
.icons > ul li {
flex: 1;
}
form ul li {
font-size: 15px;
width: inherit;
color: #ff0000;
text-align: left;
}
form ul {
margin-left: 0px;
margin-right: 0px;
height: 10px;
}
/*What I tried so far... some of them might be nonesense but I was desperate!*/
#media (max-width: 450px) {
.icons {
padding: 25px;
width: 25%;
flex-wrap: wrap;
position: absolute;
margin:auto;
justify-content: center;
align-items: center;
display:inline-block;
text-align: center;
overflow-x: hidden;
line-height: 1.2;
width: 100%;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
}
#media (max-width: 450px) {
.icons li {
width: 50%;
}
restructure your code to remove ul, li and let the default behavior manage this for;
working snippet below:
i {
list-style: none;
font-size: 30px;
border-radius: 400px;
width: 50px;
height: 50px;
display: block;
text-align: center;
padding-top: 4px;
padding-bottom: 0px;
color: #2c3e50;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Do you really need ul, li ?
<hr/>
<div class="icons text-center">
<i class="fab fa-html5"></i>
<i class="fab fa-css3-alt"></i>
<i class="fab fa-js"></i>
<i class="fab fa-bootstrap"></i>
<i class="fab fa-sass"></i>
<i class="fab fa-less"></i>
<i class="fab fa-github"></i>
<i class="fab fa-wordpress"></i>
<i class="fab fa-adobe"></i>
<i class="fab fa-python"></i>
</div>
You could have done something this way
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container text-center">
<span style="padding:5px">
<i class="fab fa-facebook-f"></i>
</span>
<span style="padding:5px">
<i class="fab fa-twitter"></i>
</span>
<span style="padding:5px">
<i class="fab fa-html5"></i>
</span> <span style="padding:5px">
<i class="fab fa-html5"></i>
</span> <span style="padding:5px">
<i class="fab fa-html5"></i>
</span> <span style="padding:5px">
<i class="fab fa-html5"></i>
</span> <span style="padding:5px">
<i class="fab fa-html5"></i>
</span> <span style="padding:5px">
<i class="fab fa-html5"></i>
</span> <span style="padding:5px">
<i class="fab fa-html5"></i>
</span>
<span style="padding:5px">
<i class="fab fa-facebook-f"></i>
</span>
<span style="padding:5px">
<i class="fab fa-twitter"></i>
</span> <span style="padding:5px">
<i class="fab fa-facebook-f"></i>
</span>
<span style="padding:5px">
<i class="fab fa-twitter"></i>
</span> <span style="padding:5px">
<i class="fab fa-facebook-f"></i>
</span>
<span style="padding:5px">
<i class="fab fa-twitter"></i>
</span>
</div>
I am trying to get some space between my 4 fa-icons to spread them out more across the page. I'd like them to take up around 75% of the page. The HTML and accompanying CSS is shown below:
.fa-icons {
padding: 15px;
text-align: center;
}
.icon-background-face {
color: #3b5998;
}
.fa-facebook {
color: #fff;
}
.facebook i {
margin-right: 100px;
}
.icon-background-twit {
color: #00aced;
}
.fa-twitter {
color: #fff;
}
.icon-background-tube {
color: #bb0000;
}
.fa-youtube {
color: #fff;
}
.icon-background-env {
color: #000000;
}
.fa-envelope {
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="fa-icons">
<span class="fa-stack fa-5x">
<a href="" target="_blank">"
<i class="fa fa-circle fa-stack-2x icon-background-face fa-fw"></i>
<i class="fa fa-facebook fa-1x fa-stack-1x fa-fw"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-twit fa-fw"></i>
<i class="fa fa-twitter fa-1x fa-stack-1x fa-fw"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-tube"></i>
<i class="fa fa-youtube fa-1x fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="">
<i class="fa fa-circle fa-stack-2x icon-background-env"></i>
<i class="fa fa-envelope fa-1x fa-stack-1x"></i>
</a>
</span>
</div>
Just use margin like this:
.fa-stack {
margin-right: 10px; <-- change accordingly
}
Create a custom class name for the last div and add margin-right: 0; to prevent unwanted margin after that div.
You can simply add margin to the fas, see the following example:
.fa-icons {
padding: 15px;
text-align: center;
}
.fa-icons span {
margin: 0 20px;
}
.icon-background-face {
color: #3b5998;
}
.fa-facebook {
color: #fff;
}
.facebook i {
margin-right: 100px;
}
.icon-background-twit {
color: #00aced;
}
.fa-twitter {
color: #fff;
}
.icon-background-tube {
color: #bb0000;
}
.fa-youtube {
color: #fff;
}
.icon-background-env {
color: #000000;
}
.fa-envelope {
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="fa-icons">
<span class="fa-stack fa-5x">
<a href="" target="_blank">"
<i class="fa fa-circle fa-stack-2x icon-background-face fa-fw"></i>
<i class="fa fa-facebook fa-1x fa-stack-1x fa-fw"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-twit fa-fw"></i>
<i class="fa fa-twitter fa-1x fa-stack-1x fa-fw"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-tube"></i>
<i class="fa fa-youtube fa-1x fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="">
<i class="fa fa-circle fa-stack-2x icon-background-env"></i>
<i class="fa fa-envelope fa-1x fa-stack-1x"></i>
</a>
</span>
</div>
codepen
.fa-icons {
text-align: center;
width: 75%;
display: table;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.fa-icons>span{
display: table-cell;
vertical-align:top;
}
.icon-background-face {
color: #3b5998;
}
.fa-facebook {
color: #fff;
}
.icon-background-twit {
color: #00aced;
}
.fa-twitter {
color: #fff;
}
.icon-background-tube {
color: #bb0000;
}
.fa-youtube {
color: #fff;
}
.icon-background-env {
color: #000000;
}
.fa-envelope {
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="fa-icons">
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-face fa-fw"></i>
<i class="fa fa-facebook fa-1x fa-stack-1x fa-fw"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-twit fa-fw"></i>
<i class="fa fa-twitter fa-1x fa-stack-1x fa-fw"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="" target="_blank">
<i class="fa fa-circle fa-stack-2x icon-background-tube"></i>
<i class="fa fa-youtube fa-1x fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack fa-5x">
<a href="">
<i class="fa fa-circle fa-stack-2x icon-background-env"></i>
<i class="fa fa-envelope fa-1x fa-stack-1x"></i>
</a>
</span>
</div>
I was try to set icons and text on images but it put extra space beside image, so how can i remove extra space from image?
.fb {
position: absolute;
top: 0px;
right: 5px;
z-index: 100;
}
.tweeter {
position: absolute;
top: 20px;
right: 5px;
z-index: 100;
}
img {
overflow: hidden;
}
div {
height: 250px;
width: 250px;
display: inline;
}
<div>
<img https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
<div>
<img https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
<div>
<img https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
<div>
<img https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
first : your img tags are not correct. should be <img src="url">
second : display:inline generates white spaces between elements. so i suggest you use float:left instead
for example if you want 4 divs on one row, use float:left;width:25%; that way you are sure there are no white spaces between the divs
also to be sure the img covers all the width of the div, use width:100%;height:auto on the img. plus overflow:hidden on the img has no effect . you can use it on the div instead
see snippet below :
.fb {
position: absolute;
top: 0px;
right: 5px;
z-index: 100;
}
.tweeter {
position: absolute;
top: 20px;
right: 5px;
z-index: 100;
}
img {
width:100%;
height:auto;
}
div {
height: 250px;
width: 250px;
float:left;
width:25%;
position:relative;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<img src="https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
<div>
<img src ="https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
<div>
<img src ="https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
<div>
<img src ="https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<a class="fb" href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a class="tweeter" href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</div>
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/