align icons horizontally

Question

align icons horizontally

Navigation

#1 by (1 votes)

2

I have this menu of social networks, I want to align the icons horizontally, in my layout they stand on top of each other

How do I do it?

html:

    <ul class="social-icons">
    <li><a href="" class="social-icon"> <i class="facebook"></i></a></li>
    <li><a href="" class="social-icon"> <i class="youtube"></i></a></li>
    <li><a href="" class="social-icon"> <i class="twitter"></i></a></li>
    <li><a href="" class="social-icon"> <i class="instagram"></i></a></li>

    </ul>
    </div>

css:

   body {
   font-family: 'Lato', sans-serif;
   color: #FFF;
   background: #322f30;
   -webkit-font-smoothing: antialiased;
   }

  a {
text-decoration: none;
color: #fff;
}

p > a:hover{
color: #d9d9d9;
text-decoration:  underline;
}

ul {
padding:0;
list-style: none;
}

.footer-social-icons {
width: 350px;
display:block;
margin: 0 auto;
}

.social-icon {
color: #fff;
 }

 ul.social-icons {
 margin-top: 630px;
 margin-left: -30px;

 }


.social-icons li {
vertical-align: top;
display: inline;
height: 100%;
margin-left: 50px;
}

.social-icons a {
color: #fff;
text-decoration: none;
}

.facebook {
widht:150px;
height:150px;
padding:2px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background: url(../img/fb.png) no-repeat;
background-size:20px 20px;

 }

.facebook:hover {
background:url(../img/fb2.png) no-repeat;
background-size:20px 20px;
widht:150px;
height:150px;
}

.youtube {
widht:150px;
height:150px;
padding:2px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background: url(../img/yt.png) no-repeat;
background-size:20px 20px;


}

.youtube:hover {
background:url(../img/yt2.png) no-repeat;
background-size:20px 20px;
widht:150px;
height:150px;
}

.twitter {
widht:150px;
height:150px;
padding:2px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background: url(../img/tt.png) no-repeat;
background-size:20px 20px;

}

 .twitter:hover {
  background:url(../img/tt2.png) no-repeat;
  background-size:20px 20px;
  widht:150px;
  height:150px;
  }


.instagram {
widht:150px;
height:150px;
padding:2px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background: url(../img/insta.png) no-repeat;
background-size:20px 20px;

 }
  .instagram:hover {
background:url(../img/insta2.png) no-repeat;
background-size:20px 20px;
widht:150px;
height:150px;
 }

html css

asked by anonymous 17.01.2018 / 04:33

1 answer

Slides in HTML5 / CSS3 - Background does not change Advantages x Disadvantages SPA VueJs

score 1 · Answer 1

Here's a blueprint for how it should look. Your CSS has some problems. For example% w / o% was spelled wrong and did not have a Width tag before <div> , and a <ul> of 650px is not the correct way to align an element at the bottom of the page.

I needed to put margin-top into position:absolute , then aligned it with <ul>

Run the Snippet below and read the code to better understand how I did it.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
   font-family: 'Lato', sans-serif;
   color: #FFF;
   background: #322f30;
   -webkit-font-smoothing: antialiased;
   }

a {
text-decoration: none;
color: #fff;
}

p > a:hover{
color: #d9d9d9;
text-decoration:  underline;
}

ul {
padding:0;
list-style: none;
}

.footer-social-icons {
width: 350px;
display:block;
margin: 0 auto;
}

.social-icon {
color: #fff;
 }

/* aqui eu alinho o UL na básida da página e faço a centralização dele na horizontal */
 ul.social-icons {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
 }


.social-icons li {
vertical-align: top;
display: inline;
margin-left: 20px;
}

.social-icons a {
color: #fff;
text-decoration: none;
}

.facebook {
width:150px;
height:150px;
padding:2px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background: url(http://placeskull.com/20/20) no-repeat;
background-size:20px 20px;

 }

.facebook:hover {
background:url(http://placeskull.com/20/20) no-repeat;
background-size:20px 20px;
width:150px;
height:150px;
}

.youtube {
width:150px;
height:150px;
padding:2px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background: url(http://placeskull.com/20/20) no-repeat;
background-size:20px 20px;


}

.youtube:hover {
background:url(http://placeskull.com/20/20) no-repeat;
background-size:20px 20px;
width:150px;
height:150px;
}

.twitter {
width:150px;
height:150px;
padding:2px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background: url(http://placeskull.com/20/20) no-repeat;
background-size:20px 20px;

}

.twitter:hover {
  background:url(http://placeskull.com/20/20) no-repeat;
  background-size:20px 20px;
  width:150px;
  height:150px;
}

.instagram {
width:150px;
height:150px;
padding:2px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
background: url(http://placeskull.com/20/20) no-repeat;
background-size:20px 20px;
}

.instagram:hover {
background:url(http://placeskull.com/20/20) no-repeat;
background-size:20px 20px;
width:150px;
height:150px;
}

<div>
    <ul class="social-icons">
        <li><a href="" class="social-icon"> <i class="facebook"></i></a></li>
        <li><a href="" class="social-icon"> <i class="youtube"></i></a></li>
        <li><a href="" class="social-icon"> <i class="twitter"></i></a></li>
        <li><a href="" class="social-icon"> <i class="instagram"></i></a></li>
    </ul>
</div>