将Glyphicons降低

Question

我正在为我的网页使用自定义字体。不幸的是，它不是标准字体，其偏移量不正确。当我将这个字体与twitter bootstrap glyphicon一起使用时，它们不会出现在同一行中。

如何将glyphicon移动一点点？或者还有其他任何解决这个问题的好方法吗？

<li><a href="#"><span class="glyphicon glyphicon-log-out"></span> My Text</a></li>

Answer 1

您可以使用简单的CSS移动位置。使用像em这样的相对单位应适用于所有字体大小。您可能需要设置更多规则并使用px进行像素完美对齐。

.glyphicon { 
  top: 0.5em;
}

.glyphicon  { 
  top: 0.5em !important;
  /* You can omit `!important` if you include your css after the glyphicon css */
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<ul>
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span> My Text</a></li>
</ul>