Need to put circle around fontawesome social media link. I did it, but problem occurred with Facebook icon. The highlight circle is not fit like others. How to fix this ?
.social-media span {
list-style-type: none;
padding: 5px 5px;
background-color: pink;
display: inline-block;
border-radius: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<title>Hi</title>
<body>
<ul class="social-media list-inline" align="right">
<li><span class="fa fa-facebook"></span></li>
<li><span class="fa fa-envelope"></span></li>
<li><span class="fa fa-twitter"></span></li>
<li><span class="fa fa-youtube-play"></span></li>
<li><span class="fa fa-instagram"></span></li>
</ul>
</body>
.social-media {
display: table;
border-spacing: 10px;
}
.social-media li {
list-style-type: none;
background-color: pink;
display: table-cell;
text-align: center;
height: 30px;
width: 30px;
font-size: 30;
vertical-align: middle;
border: 2px solid #ccc;
border-radius: 20px;
}
<html>
<head>
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
</head>
<body>
<ul class="social-media">
<li><span class="fa fa-facebook"></span></li>
<li><span class="fa fa-envelope"></span></li>
<li><span class="fa fa-twitter"></span></li>
<li><span class="fa fa-youtube-play"></span></li>
<li><span class="fa fa-instagram"></span></li>
</ul>
</body>
</html>
Apply height and width property for icons.
You could give the .social-media a width like this:
.social-media span {
list-style-type: none;
padding: 5px 5px;
background-color: pink;
display: inline-block;
border-radius: 20px;
width: 15px;
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Hi</title>
<body>
<ul class="social-media list-inline" align="right">
<li><span class="fa fa-facebook"></span></li>
<li><span class="fa fa-envelope"></span></li>
<li><span class="fa fa-twitter"></span></li>
<li><span class="fa fa-youtube-play"></span></li>
<li><span class="fa fa-instagram"></span></li>
</ul>
</body>
Here the solution
.circle{
border-radius: 50%;
margin: 0.15em;
font-size: 3em;
}
.fa-twitter{
background: #4099FF;
color: #FFFFFF;
padding: 0.05em 0.07em;
}
.fa-google-plus{
color: #FFFFFF;
background: #dd4b39;
padding: 0.1em 0.1em;
}
.fa-dribbble{
color: #ea4c89;
}
.fa-pinterest{
color: #cb2027;
}
.fa-facebook{
background: #3B5998;
color: #FFFFFF;
padding: 0.05em 0.3em;
}
.fa-youtube{
background: #bb0000;
color: #FFFFFF;
padding: 0.25em 0.25em;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">
<i class="fa fa-twitter circle"></i>
<i class="fa fa-facebook circle"></i>
<i class="fa fa-google-plus circle"></i>
<i class="fa fa-dribbble circle"></i>
<i class="fa fa-pinterest circle"></i>
<i class="fa fa-youtube circle"></i>
You can use fa-stack class, delete paddings and simply add text-align: center property. Here is working fiddle for you, and a snippet, and you will not need to create any additional classes
.social-media span {
list-style-type: none;
background-color: pink;
display: inline-block;
border-radius: 20px;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<title>Hi</title>
<body>
<ul class="social-media list-inline" align="right">
<li><span class="fa fa-stack fa-facebook"></span></li>
<li><span class="fa fa-stack fa-envelope"></span></li>
<li><span class="fa fa-stack fa-twitter"></span></li>
<li><span class="fa fa-stack fa-youtube-play"></span></li>
<li><span class="fa fa-stack fa-instagram"></span></li>
</ul>
</body>
.social-media span {
list-style-type: none;
background-color: pink;
display: inline-block;
border-radius: 20px;
height: 30px;
width: 30px;
}
.social-media span i {
padding: 5px 9px
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Hi</title>
<body>
<ul class="social-media list-inline" align="right">
<li><span ><i class="fa fa-facebook"></i></span></li>
<li><span><i class="fa fa-envelope"></i></span></li>
<li><span ><i class="fa fa-twitter"></i></span></li>
<li><span ><i class="fa fa-youtube-play"></i></span></li>
<li><span ><i class="fa fa-instagram"></i></span></li>
</ul>
</body>
Related
I want to add a Chevron, at the end of each li, and I want to align all the Chevrons 5px from the end of the ul, like the image below:
How can I achive this?
ul {
background-color: cyan;
width: 120px;
}
<ul>
<li>Cars</li>
<li>Real Estate</li>
<li>Fashion</li>
<li>Sports</li>
</ul>
P.S. I am using font awesome's chevron: <i class="fas fa-chevron-right"></i>
Use :after selector for this
ul {
background-color: cyan;
width: 120px;
}
ul li a:after {
content:">";
float: right;
margin-right: 10px;
}
<ul>
<li>Cars</li>
<li>Real Estate</li>
<li>Fashion</li>
<li>Sports</li>
</ul>
Or using Fontawesome
ul {
background-color: cyan;
width: 120px;
}
ul li a .fas {
float: right;
margin-right: 10px;
font-size: 10px;
line-height: 1.6;
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<ul>
<li>Cars <i class="fas fa-chevron-right"></i></li>
<li>Real Estate <i class="fas fa-chevron-right"></i></li>
<li>Fashion <i class="fas fa-chevron-right"></i></li>
<li>Sports <i class="fas fa-chevron-right"></i></li>
</ul>
I used:
<i class="fa fa-chevron-right"></i>
Also, these shivrons work as links.
ul {
background-color: cyan;
width: 120px;
}
ul li i{
float: right;
margin-right: 5px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ul>
<li>Cars <i class="fa fa-chevron-right"></i></li>
<li>Real Estate <i class="fa fa-chevron-right"></i></li>
<li>Fashion <i class="fa fa-chevron-right"></i></li>
<li>Sports <i class="fa fa-chevron-right"></i></li>
</ul>
I am nearly done with this webpage and have some list items, but the li tags aren't inheriting the parent font. I have tried multiple ways to resolve it including using the ul and li tags to add inherit styling, but still no change. I've posted the code below. Thanks as always!
.section-plans {
background-color: #f4f4f4;
}
ul {
list-style: none;
}
.plan-box {
background-color: #fff;
border-radius: 5px;
width: 90%;
margin-left: 5%;
}
.plan-box div {
padding: 15px;
border-bottom: 1px solid #e8e8e8;
}
.residential {
font-size: 300%;
margin-bottom: 10px;
}
<div class="col span 1-of-3">
<div class="plan-box">
<div>
<h3>Commercial</h3>
<p class="residential"></p>
<ul>
<li><i class="far fa-check-circle">Clean & Disinfect</i></li>
<li><i class="far fa-check-circle">Emptry trash bins</i></li>
<li><i class="far fa-check-circle">Sweep & mop floor</i></li>
<li><i class="far fa-check-circle">Vaccum carpets & upholstry</i></li>
<li><i class="far fa-check-circle">Thoroughly wipe down handles & doors</i></li>
<li><i class="far fa-check-circle">Smudge free windown wipedown</i></li>
</ul>
</div>
<div>
Sign up now
</div>
Need to change in i tag close it before li text start instead of close end of the li text. Run code snippet
.section-plans {
background-color: #f4f4f4;
}
ul {
list-style: none;
}
.plan-box {
background-color: #fff;
border-radius: 5px;
width: 90%;
margin-left: 5%;
}
.plan-box div {
padding: 15px;
border-bottom: 1px solid #e8e8e8;
}
.residential {
font-size: 300%;
margin-bottom: 10px;
}
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<div class="col span 1-of-3">
<div class="plan-box">
<div>
<h3>Commercial</h3>
<p class="residential"></p>
<ul>
<li><i class="far fa-check-circle"></i> Clean & Disinfect</li>
<li><i class="far fa-check-circle"></i> Emptry trash bins </li>
<li><i class="far fa-check-circle"></i> Sweep & mop floor </li>
<li><i class="far fa-check-circle"></i> Vaccum carpets & upholstry </li>
<li><i class="far fa-check-circle"></i> Thoroughly wipe down handles & doors </li>
<li><i class="far fa-check-circle"></i> Smudge free windown wipedown </li>
</ul>
</div>
<div>
Sign up now
</div>
this because your i tag , you can fix it with add this line to your css
ul li i {
font-style: normal;
}
I'm trying to align font awesome icons in the middle of the of the background image when I add position:relative; and use top:xxpx; it works but I want to figure out a way where I don't have to use position. Attached is a fiddle of my code, and a snippet below.
.footer-top {
height: 100px;
background-image: url("https://s4.postimg.org/714d8ul8d/footer-black.png");
}
.footer-top a {
text-decoration: none;
color: white;
}
.navbar-list {
padding-left: 540px;
display: inline;
}
.navbar-list:hover {
color: #fe5b1f;
cursor: pointer;
}
.navbar-icons {
display: inline;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer-top">
<ul class="navbar-list" id="icons-list">
<li class="navbar-icons">
<i class="fa fa-facebook-square fa-6" aria-hidden="true"></i>
</li>
<li class="navbar-icons">
<i class="fa fa-instagram fa-6" aria-hidden="true"></i>
</li>
<li class="navbar-icons">
<i class="fa fa-youtube-square fa-6" aria-hidden="true"></i>
</li>
</ul>
</div>
I would use display: flex; align-items: center; justify-content: center; on the parent to put the child in the dead center. Then use padding: 0 on the ul to remove the default left padding.
.footer-top {
height: 100px;
background-image: url("https://s4.postimg.org/714d8ul8d/footer-black.png");
display: flex;
align-items: center;
justify-content: center;
}
.footer-top a {
text-decoration: none;
color: white;
}
.navbar-list {
padding: 0;
}
.navbar-list:hover {
color: #fe5b1f;
cursor: pointer;
}
.navbar-icons {
display: inline;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer-top">
<ul class="navbar-list" id="icons-list">
<li class="navbar-icons"><i class="fa fa-facebook-square fa-6" aria-hidden="true"></i></li>
<li class="navbar-icons"><i class="fa fa-instagram fa-6" aria-hidden="true"></i></li>
<li class="navbar-icons"><i class="fa fa-youtube-square fa-6" aria-hidden="true"></i></li>
</ul>
</div>
You say you don't want to use position, but because it causes other elements to shift around on the page. If you use position: absolute on the ul, nothing else will move around because of that.
.footer-top {
height: 100px;
background-image: url("https://s4.postimg.org/714d8ul8d/footer-black.png");
position: relative;
}
.footer-top a {
text-decoration: none;
color: white;
}
.navbar-list {
padding: 0; margin: 0;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}
.navbar-list:hover {
color: #fe5b1f;
cursor: pointer;
}
.navbar-icons {
display: inline;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer-top">
<ul class="navbar-list" id="icons-list">
<li class="navbar-icons"><i class="fa fa-facebook-square fa-6" aria-hidden="true"></i></li>
<li class="navbar-icons"><i class="fa fa-instagram fa-6" aria-hidden="true"></i></li>
<li class="navbar-icons"><i class="fa fa-youtube-square fa-6" aria-hidden="true"></i></li>
</ul>
</div>
.social-links {
display: inline-block;
margin-left: 15px;
margin-right: 15px;
vertical-align: middle;
list-style: none;
}
.social-links li a:hover,
.social-links li a:focus {
color: #fff;
outline: none;
}
.social-links .nav li a {
font-weight: 400;
letter-spacing: 1px;
}
.phone{
float: right;
display: inline-block;
list-style: none;
}
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="top-bar">
<div class="container">
<ul class="social-links list-inline">
<li><a class="fa fa-facebook text-primary"></a></li>
<li><a class="fa fa-twitter text-primary"></a></li>
<li><a class="fa fa-instagram text-primary"></a></li>
<li><a class="fa fa-linkedin text-primary"></a></li>
</ul>
<ul class="phone list-inline">
<li><a class="fa fa-phone text-primary"></a></li>
</ul>
</div>
trying to make the icons inline and float phone to the right in bootstrap but i can't get it to work i dont know why i can't get the classes to work the only way that it works if i use style="" inside the ul
I have to display text left side and font awesome icon on the right side.Now I am getting all font awesome icon below of text.I think this may pretty simple, but still, I can not get it to work.Would you help me in this?
.top-contact-menu {
background-color: #6aaf08;
width: 100%;
padding: 5px 0px;
}
.top-contact-menu h2 {
color: #fff;
font-size: 14px;
}
ul.address-top-menu {
list-style: none;
}
ul.address-top-menu li {
display: inline-block;
}
ul.address-top-menu li:after {
content: '|';
color: #fff;
}
ul.address-top-menu li:last-child:after {
content: ' ';
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="top-contact-menu">
<h2>we are open:10am to 8pm</h2>
<ul class="address-top-menu">
<li><i class="fa fa-phone"></i>
</li>
<li><i class="fa fa-envelope-o"></i>
</li>
<li>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-google-plus"></i>
</li>
</ul>
</div>
Use Float. It will help you to push content to extreme right.
.top-contact-menu {
background-color: #6aaf08;
width: 100%;
padding: 5px 0px;
}
.top-contact-menu h2 {
color: #fff;
font-size: 14px;
display: inline-block;
}
ul.address-top-menu {
list-style: none;
float: right;
padding-right: 20px;
vertical-align: top;
margin-top: 10px;
}
ul.address-top-menu li {
display: inline-block;
}
ul.address-top-menu li:after {
content: '|';
color: #fff;
}
ul.address-top-menu li:last-child:after {
content: ' ';
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="top-contact-menu">
<h2>we are open:10am to 8pm</h2>
<ul class="address-top-menu">
<li><i class="fa fa-phone"></i>
</li>
<li><i class="fa fa-envelope-o"></i>
</li>
<li>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-google-plus"></i>
</li>
</ul>
</div>
try to this..
.top-contact-menu h2 {
color: #fff;
font-size: 14px;
display: inline-block;
}
ul.address-top-menu {
list-style: none;
float: right;
display: inline-block;
}
Use float to handle the alignments. Check .top-contact-menu and ul.address-top-menu
.top-contact-menu {
background-color: #6aaf08;
width: 100%;
padding: 5px 0px;
display: inline-block;
}
.top-contact-menu h2 {
color: #fff;
font-size: 14px;
float: left;
}
ul.address-top-menu {
list-style: none;
float: right;
padding-right: 20px;
vertical-align: top;
margin-top: 10px;
}
ul.address-top-menu li {
display: inline-block;
}
ul.address-top-menu li:after {
content: '|';
color: #fff;
}
ul.address-top-menu li:last-child:after {
content: ' ';
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="top-contact-menu">
<h2>we are open:10am to 8pm</h2>
<ul class="address-top-menu">
<li><i class="fa fa-phone"></i>
</li>
<li><i class="fa fa-envelope-o"></i>
</li>
<li>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-google-plus"></i>
</li>
</ul>
</div>
Use flexbox over the class .top-contact-menu
.top-contact-menu {
background-color: #6aaf08;
width: 100%;
padding: 5px 0px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-content: flex-start;
}
Try this:
.top-contact-menu:after{content:'';display:table;clear:both;}
.top-contact-menu h2{float:left;}
.address-top-menu{float:right;}