如何垂直对齐图标字体

Question

我正在尝试垂直对齐字体图标。我试过＆＃34; vertical-align：middle＆＃34;但我总是得到一点对齐的差异。以下示例有两种不同的方式来使用图标，但它们未正确对齐。

关于Jsfiddle的一个例子： https://jsfiddle.net/crphowLg/7/

<link rel="stylesheet" type="text/css" href="https://fontastic.s3.amazonaws.com/PxvnwqrSXE7pXNDNDqGp4i/icons.css">
<style>
div {
    font-size: 50px;
    font-family: helvetica,arial,sans-serif;
    text-transform: uppercase;
    background: yellow;
}
.cart {
    margin-top: 20px;
}
.cart:before {
    font-family: "fanatic-icons" !important;
    font-weight: normal;
    content: "b";
    margin-right: 5px;
    vertical-align: middle;
    text-transform: none;
}
</style>

<div>
<span class="icon icon-shopping-cart"></span>
    Shopping Cart
</div>

<div class="cart">
    Shopping Cart
</div>

Answer 1

您可以尝试vertical-align: text-bottom或vertical-align: text-top，具体取决于您认为哪一个更垂直居中。

对于您的购物车图标，似乎text-top最垂直居中。

示例：https://jsfiddle.net/p3g189bg/

Answer 2

您可以尝试vertical-align:middle;

或line-height:1;

或使用padding属性，您可以设置图标位置

示例使用vertical:middle;属性js小提琴：http://jsfiddle.net/vrcarwrj/

Answer 3

尝试使用line-height属性

您可以将其设置为0.5,1,1.5等

Answer 4

除了上述内容，使用您描述的span元素方法，您可以相对于其父div元素相对定位span标记。

喜欢：

div{
 position: relative;
}    
span.icon-shopping-cart{
 position: relative;
 top: 5px;
}

Answer 5

您可以尝试使用valign: middle

和/或然后将line-height设置为1px，1.5px等

Answer 6

如今通过Flexbox的另一个示例。

span {
  font-family: helvetica, arial, sans-serif;
  display: inline-flex;
  align-items: center;
  padding: 0 1rem;
  font-size: 3rem;
  line-height: 4rem;
  border: 1px solid #ffb0d1;
}

/* target all Font Awesome 5 <svg> tags */
.svg-inline--fa {
  padding-right: 1.5rem;
}

<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js"></script>
<span>
   <i class="fas fa-shopping-cart"></i>
   Shopping Cart
</span>