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

【问题标题】：How can I adjust the vertical position a font awesome icon?如何调整字体真棒图标的垂直位置？
【发布时间】：2016-08-16 14:35:07
【问题描述】：

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

<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/ 基本上我希望可以选择向上或向下移动图标。我尝试添加填充和边距，但没有。

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

【问题讨论】：

你试过什么？你能发布你的CSS吗？通常 font-awesome 将“i”元素的显示设置为内联。我通常根据我要定位的内容将其设置为 inline-block 或 block。

标签： html css

【解决方案1】：

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

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

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

我已经让它向上移动了。

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

【讨论】：

检查它是否可以跨浏览器工作，对于您关心的浏览器。我只在 chrome 和 IE Edge 中检查过这个。

【解决方案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>

【讨论】：

我在你的演示中的文本下方得到了图标，这就是我这么说的原因
这就是它应该在的地方......垂直位置已根据OP的要求进行了调整。只需更改顶部值即可进行调整。

【解决方案3】：

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>

【讨论】：

Kode_12 使用 flex 吗？

【解决方案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 个解决方案。还有更多...但是您应该能够使用这两种方法之一来实现您想要的。让我知道它是否有效

【讨论】：

尝试给外部 div 一个高度，我猜你的两个演示都不起作用..你能检查一下吗？
用 height:150px 改变了我的两个答案。对于第一个示例，您需要将高度设置为 span 元素和 display:inline-block 。在第二个示例中，它适用于top 和height:150px on div
但是，特别是使用第二种解决方案，您可以将 top:80% 更改为您想要的任何内容，它就像一个魅力。不知道你为什么说它不起作用
我的观点是，需要通过调整特定属性来调整演示以使其居中。好吧，我同意你的看法：）