将字形图标向下移动

【问题标题】：Move Glyphicons Lower将字形图标向下移动
【发布时间】：2014-09-19 05:00:17
【问题描述】：

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

如何将字形图标移低一点？或者有没有其他好的解决方案来解决这个问题？

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

【问题讨论】：

Te 的字距调整是可怕的！

标签： html css twitter-bootstrap glyphicons

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

【讨论】：