垂直图标栏

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 {
  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 2

我更改了.fa类属性

physicians = (
    Physician.objects.all() 
    if filter_by in (None, '') 
    else Physician.objects.all().order_by(filterby)
)

同样正确的代码.fa { padding: 5px; font-size: 30px; height: 50px; width: 50px; line-height:50px; text-align:center; } 不是a .fa

.fa a

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;
 }