수직 아이콘 표시 줄

Question

HTML

<div> 
<a href="#" target="_blank"><i class="fa fa-facebook"></i></a> 
<a href="#" target="_blank"><i class="fa fa-twitter"></i></a> 
<a href="#" target="_blank"><i class="fa fa-google"></i></a> 
<a href="#" target="_blank"><i class="fa fa-linkedin"></i></a> 
<a href="#" target="_blank"><i class="fa fa-comments"></i></a> 
<a href="#" target="_blank"><i class="fa fa-users"></i></a> 
<div> 

CSS는 이러한 아이콘은 수평으로 정렬되어 있음을 알 수있다하지만 난 수직 아이콘 표시 줄을 필요로

.fa { 
padding: 5px; 
font-size: 30px; 
height: 50px; 
width: 50px; 
line-height:40px; 
text-align:center; 
position:relative; 
float:right; 
vertical-align:bottom; 
} 
.fa a { 
display:block; 
} 

, 그래서 내가 추가하는 것을 잊었다 아무것도가있다. 또한 아래 스크린 샷을 첨부하고 있습니다.

Answer 1

내가 .fa 클래스 속성을 변경

.fa { 
padding: 5px; 
font-size: 30px; 
height: 50px; 
width: 50px; 
line-height:50px; 
text-align:center; 
} 

또한 바로 코드 a .fa not .fa a

,

a .fa { 
display:block; 
} 
a {text-decoration: none;} 

Answer 2

단순히 당신의 마지막 선택을 플로트를 제거하고 수정 : 솔루션에 미리 감사 :

.fa { 
 
    padding: 5px; 
 
    font-size: 30px; 
 
    height: 50px; 
 
    width: 50px; 
 
    line-height: 40px; 
 
    text-align: center; 
 
    position: relative; 
 
    vertical-align: bottom; 
 
    background: blue; 
 
    border-bottom:1px solid red; /*not needed, simply to show blocks*/ 
 
} 
 

 
a .fa { 
 
    display: block; 
 
}

<div> 
 
    <a href="#" target="_blank"><i class="fa fa-facebook"></i></a> 
 
    <a href="#" target="_blank"><i class="fa fa-twitter"></i></a> 
 
    <a href="#" target="_blank"><i class="fa fa-google"></i></a> 
 
    <a href="#" target="_blank"><i class="fa fa-linkedin"></i></a> 
 
    <a href="#" target="_blank"><i class="fa fa-comments"></i></a> 
 
    <a href="#" target="_blank"><i class="fa fa-users"></i></a> 
 
<div>

Answer 3

이 방법을 사용해보십시오 (그 '... 작업) : -

<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> 
<a href="#" target="_blank"><i class="fa fa-facebook"></i></a> 
<a href="#" target="_blank"><i class="fa fa-twitter"></i></a> 
<a href="#" target="_blank"><i class="fa fa-google"></i></a> 
<a href="#" target="_blank"><i class="fa fa-linkedin"></i></a> 
<a href="#" target="_blank"><i class="fa fa-comments"></i></a> 
<a href="#" target="_blank"><i class="fa fa-users"></i></a> 
<div> 


div { 
    width:50px; 
    height:300px; 
    float:right; 
} 
a { 
padding: 5px; 
font-size: 30px; 
height: 50px; 
width: 50px; 
line-height:40px; 
}