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

Question

我有如下的font awesome图标：

<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/。

基本上，我想要有向上或向下移动图标的选项。我尝试添加填充和边距，但是没有效果。

我如何改变图标的垂直位置？

- Kode_12

---

你试过什么？能把你的CSS贴出来吗？一般来说，font-awesome将"display"属性设置为"inline"以适用于"i"元素。根据我想要定位的内容，我通常将其设置为"inline-block"或者"block"。 - Lowkase

Answer 1

您也可以使用行高和垂直对齐，如下所示：

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

并将行高更改为较高或较低的值，以将图标向上或向下移动。

我已经让它向上移动了。

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

- Arathi Sreekumar

---

请检查它是否可以跨浏览器正常工作，对于您关心的浏览器。我只在Chrome和IE Edge中进行了测试。 - Arathi Sreekumar

我的所有网页字体图标都向上偏移了太多，所以我在网页字体类上使用了 vertical-align: middle; 来修复它们。 - agm1984

Answer 2

相对定位：

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>

- Paulie_D

---

我在你的演示中得到的图标距离文本很远，这就是我说那样的原因。 - kukkuz

那就是它应该在的位置...垂直位置已根据操作员的要求进行了调整。只需更改顶部值即可进行调整。 - Paulie_D

Answer 3

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>

这只是两种解决方案，还有更多……但你应该能够使用其中一种实现你想要的。如果可以的话，请告诉我它是否有效。

- Mihai T

---

尝试为外部div指定高度，你的两个演示似乎都无法工作。你能检查一下吗？ - kukkuz

将我的两个答案都改为 height:150px。对于第一个示例，您需要设置 span 元素的高度和 display:inline-block。在第二个示例中，可以通过在 div 上使用 top 和 height:150px 来实现。 - Mihai T

但是，特别是使用第二个解决方案，您可以将top: 80％更改为任何您想要的值，它将起到魔法般的效果。不确定您为什么说它不起作用。 - Mihai T

我的意思是演示需要进行调整，例如通过调整特定属性来使其居中。嗯，我同意你的看法 :) - kukkuz

Answer 4

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

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

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

- Andrei Fedorov

---

Kode_12 是否在使用 Flex？ - Lowkase