Question

我有像这样的字体真棒图标：

<div>
    <span >Total</span>
    <i class="cat-color fa fa-circle" style="color: darkorange" aria-hidden="true"></i>
    <span>11</span>
</div>

这是一个jsfiddle http://jsfiddle.net/JfGVE/1519/ 基本上我想要选择向上或向下移动图标。我已经尝试添加填充和边距，但没有任何内容。

如何更改图标的垂直位置？

Answer 1

相对定位：

ul {
  padding-left: 20px;
  list-style: none;
}
li {
  margin-bottom: 10px;
}
.cat-color.fa::before {
  position: relative;
  top: 20px;
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="all-incidents-count">
  <span>Total</span>
  <i class="cat-color fa fa-circle" style="color: darkorange" aria-hidden="true"></i>
  <span>11</span>

Answer 2

你也可以像这样使用line-height和vertical-align：

.cat-color {
  line-height: 9px;
  vertical-align: top;
}

将线条高度更改为更高或更低的值，以向上或向下移动图标。

我已经提升了。

http://jsfiddle.net/JfGVE/1520/

Answer 3

div {
  display: inline-flex;
  align-items: center;
}

＆＃13;

div {
  display: inline-flex;
  align-items: center;
}
i {
  margin-bottom: 20px;
  transition: .2s
}
div:hover > i {
  margin-bottom: -20px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="all-incidents-count">
  <span>Hover</span>
  <i class="cat-color fa fa-circle" style="color: darkorange" aria-hidden="true"></i>
  <span>me!</span>
</div>

＆＃13;

Answer 4

1。将display:inline-block与vertical-align

一起使用

在此处查看更多内容：CSS vertical-align Property

.fa {
  display:inline-block;
  vertical-align:bottom;
}
span {
  display:inline-block;
  height:150px;
  }
div {
  background:red;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
    <span >Total</span>
    <i class="cat-color fa fa-circle" style="color: darkorange" aria-hidden="true"></i>
    <span>11</span>
</div>

2。使用position:relative;和top:

点击此处CSS position

.fa {
  position:relative;
  top:80%;
}
div {
  background:red;
  height:150px;
  
  }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
    <span >Total</span>
    <i class="cat-color fa fa-circle" style="color: darkorange" aria-hidden="true"></i>
    <span>11</span>
</div>

这些只是两种解决方案。还有更多...但你应该能够用其中一种来实现你想要的东西2.让我知道它是否有效

如何调整字体真棒图标的垂直位置？

4 个答案: