CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Lion
Lion

Reputation: 313

how to fix fontowesome facebook icon highlight

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><a href="#"><span class="fa fa-facebook"></span></a></li>
    <li><a href="#"><span class="fa fa-envelope"></span></a></li>
    <li><a href="#"><span class="fa fa-twitter"></span></a></li>
    <li><a href="#"><span class="fa fa-youtube-play"></span></a></li>
    <li><a href="#"><span class="fa fa-instagram"></span></a></li>



  </ul>
</body>

Upvotes: 1

Views: 459

Answers (5)

Bharath Kumar
Bharath Kumar

Reputation: 558

.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><a href="#"><span class="fa fa-facebook"></span></a></li>
      <li><a href="#"><span class="fa fa-envelope"></span></a></li>
      <li><a href="#"><span class="fa fa-twitter"></span></a></li>
      <li><a href="#"><span class="fa fa-youtube-play"></span></a></li>
      <li><a href="#"><span class="fa fa-instagram"></span></a></li>
    </ul>
  </body>
</html>

Apply height and width property for icons.

Upvotes: 1

Harshad
Harshad

Reputation: 1

.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><a href="#"><span ><i class="fa fa-facebook"></i></span></a></li>
                    <li><a href="#"><span><i class="fa fa-envelope"></i></span></a></li>
                    <li><a href="#"><span ><i class="fa fa-twitter"></i></span></a></li>
                    <li><a href="#"><span ><i class="fa fa-youtube-play"></i></span></a></li>
                    <li><a href="#"><span ><i class="fa fa-instagram"></i></span></a></li>



                       </ul>
</body>

Upvotes: 0

JSEvgeny
JSEvgeny

Reputation: 2750

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><a href="#"><span class="fa fa-stack fa-facebook"></span></a></li>
    <li><a href="#"><span class="fa fa-stack fa-envelope"></span></a></li>
    <li><a href="#"><span class="fa fa-stack fa-twitter"></span></a></li>
    <li><a href="#"><span class="fa fa-stack fa-youtube-play"></span></a></li>
    <li><a href="#"><span class="fa fa-stack fa-instagram"></span></a></li>
  </ul>
</body>

Upvotes: 0

RasmusGlenvig
RasmusGlenvig

Reputation: 765

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><a href="#"><span class="fa fa-facebook"></span></a></li>
                    <li><a href="#"><span class="fa fa-envelope"></span></a></li>
                    <li><a href="#"><span class="fa fa-twitter"></span></a></li>
                    <li><a href="#"><span class="fa fa-youtube-play"></span></a></li>
                    <li><a href="#"><span class="fa fa-instagram"></span></a></li>



                       </ul>
</body>

Upvotes: 1

Malathy Venkatesan
Malathy Venkatesan

Reputation: 213

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>

Upvotes: 0

Related Questions