FontAwesome图标未使用Foundation垂直对齐

Question

FontAwesome：4.7（最新版本） 基础6.4.2（最新版本）

每当我将两个或多个FontAwesome图标水平放置在一起时，它们就不会垂直对齐。我尝试了各种垂直对齐CSS样式，无法使其工作。请帮忙！

截图：

代码：

<div class="row callout">
  <div class="small-2 columns">
    <a href="" title="move up"><i class="fa fa-2x fa-sort-asc"></i></a>
    <a href="" title="move down"><i class="fa fa-2x fa-sort-desc"></i></a>
 </div>
 <!-- another div with more columns here, totaling 12 -->

Answer 1

您应该使用a:{display: inline;}

Answer 2

有趣的是，这个例子与Foundation没有任何关系，但与FontAwesome有关。您选择的特定图标恰好只占用字体的一部分空间，并放置在该行的顶部和底部。全高图标排队就好了。您可以在此代码示例中看到此内容（在此笔中链接：https://codepen.io/kball/pen/mMNyrZ），其中我向您的示例中的2个半高图标添加了2个全高图标。

<a href="" title="move up"><i class="fa fa-2x fa-sort-asc"></i></a>
<a href="" title="move down"><i class="fa fa-2x fa-sort-desc"></i></a>

<a href=""><i class="fa fa-2x fa-snowflake-o"></i></a>
<a href=""><i class="fa fa-2x fa-soccer-ball-o"></i></a>