CODEWITHSUNDEEP
htmlcsspadding
user5359970
user5359970

Reputation:

How to add space in between font-awesome icons in a horizontal row

Been going at this for quite some time now. I think my brain just hurts from coding for too long heres my html:

<div class="icons">
    <a href="www.twitter.com/bigmakes15"><i class="fa fa-twitter"></i></a>
    <a href="www.facebook.com/makie.michaux"><i class="fa fa-facebook"></i></a>
    <a href="www.instagram.com/bigmakes15"><i class="fa fa-instagram"></i></a>
</div>

and heres my css:

.icons a {
    display: inline;
    position: fixed;
    text-align: center;
    top: 363px;
    vertical-align: middle;
    z-index: 1000;
    height: 36px;
    width: 36px;
    text-decoration: none;
}

.fa, .fa-instagram, .fa-twitter, .fa-facebook {
     padding-right: 5px;
}

Upvotes: 4

Views: 8359

Answers (2)

The Beast
The Beast

Reputation: 1

Your html is not right try this fix:

    <a href="www.twitter.com/bigmakes15"> <i class="fa fa-twitter"></i></a>
        <a href="www.facebook.com/makie.michaux"><i class="fa fa-facebook"></i></a>
        <a href="www.instagram.com/bigmakes15"><i class="fa fa-instagram"></i></a>

and try this css:

display: block;
margin-right: 15px;

or

 display: block;
padding-right: 15px;

Upvotes: 2

henry
henry

Reputation: 4385

If I understand the trouble correctly, it's a combination of the html problem @jack smith caught and then either conflicting styles from somewhere else or the position: fixed - not sure what that's doing there, but in the code you've provided that's going to make them all lump together.

Note also that in your CSS you can just say .fa {...} instead of .fa, .fa-instagram, .fa-twitter, .fa-facebook {...} since those all have the fa class. In this snippet I'm using .icons i but it could just as well be .icons .fa or, if you want this to apply to all font awesome icons, just a bare .fa

.icons a {
  margin-right: 10px;/*space to the right of the blue*/ outline
  padding-right: 10px;/*between the red and blue outlines*/
  outline: 1px solid blue;
  
  /* you can add any of these */
  /*
  display: inline;
  text-align: center;
  top: 363px;
  vertical-align: middle;
  z-index: 1000;
  height: 36px;
  width: 36px;
  text-decoration: none;
  */
}
.icons i {
  padding-right: 10px;/*space before the red outline*/
  margin-right: 10px;/*also between the red and blue*/
  outline: 1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="icons">
    <a href="www.twitter.com/bigmakes15"><i class="fa fa-twitter"></i></a>
    <a href="www.facebook.com/makie.michaux"><i class="fa fa-facebook"></i></a>
    <a href="www.instagram.com/bigmakes15"><i class="fa fa-instagram"></i></a>
</div>

Upvotes: 1

Related Questions