对齐 FontAwesome 图标旁边的文本

Question

您好，我在尝试对齐超棒字体图标旁边的文本时遇到了问题我已经尝试了一些方法，但似乎没有一个起作用我正在尝试做的是制作一个带有按钮的面板您可以单击的一侧，它会在面板的另一侧调用带有 fontawesome 图标和文本的号码（我正在使用 bootstrap v3.3.2 来构建它）

这是我想要做的图片

这里是它目前的样子

<div class="panel panel-default">
  <div class="panel-body">
    <div class="col-lg-8">
      <i class="fa fa-phone fa-2x" style="align: middle;"></i>
      <h3>Call us</h3>
    </div>
    <div class="col-lg-4 text-center">
      <div class="btn-group btn-group-justified" style="align: middle;" role="group" aria-label="...">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" <a href="tel:">Click the button to call us</a>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

试试这个：

<i class="fa fa-phone fa-2x" style="vertical-align: middle;"></i>

Answer 2

要 complete/independent 控制超赞字体图标的位置，请尝试如下操作。

方法一：使用absolute positioning

将 position with property value of relative 添加到 h3 样式以控制重叠。
使用:after选择器content插入图标
将 position with absolute 的 property value 添加到 h3 :after CSS 代码块
使用左、右、上或下属性值实现所需位置。

方法 2： 使用 float（更简单）。

使用:after选择器content值插入图标
通过向右或向左浮动 :before 选择器来获得所需的图标位置。

/* Using absolute positoinning */

h3.absolute {
  position: relative; /* Helps us control overlap */
  padding-left: 25px; /* Creates space for the Phone Icon */
  }

 h3.absolute:before {
  content: '\f095';
  font-family: fontAwesome;
  position: absolute;
  left: 0; /* Adjust as needed */
  top: 3px; /* Adjust as needed */
  }
  
 /* Using float */

  h3.float {
  font-size: 24px;
  color: red;
  }

 h3.float:before {
  content: '\f095';
  font-family: fontAwesome;
  float: left; /* Depends on the side we want the icon */
  margin-right: 10px; /* Creates space between the icon and the text */
  font-size: 24px;
  height: 32px;
  line-height: 32px; /* Same as the font size */
  }
  
  
  /* Below code is jsut for differentiation of methods */
  strong {
  font-size: 24px;
  text-decoration: underline;
  display: block;
  width: 100%;
  }
  
  strong:last-of-type {
  color: red;
  }

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>

<strong>Using absolute Positioning</strong>
<h3 class="absolute">Call us</h3>

<strong>Using float</strong>
<h3 class="float">Call us</h3>

注意：可以通过CSSfont-size属性值调整图标大小

Answer 3

使用 .media class.

<div class="media">
    <div class="media-left">
        <i class="fa fa-home"></i>
    </div>
    <div class="media-body">
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
</div>

Answer 4

为了后代，如果您愿意使用 CSS flexbox，除了文本之外对齐图标是微不足道的。

本着回答原始问题的精神，我将 Bootstrap 及其面板作为解决方案的一部分。

这里需要注意的重点是：

display: flex 使直接子项沿默认方向（行）流动
align-items: center 沿弯曲方向对齐（在本例中为垂直对齐）
flex: 1让中间的部分尽量膨胀，把两侧推开

.banner {
  display: flex;
  align-items: center;
}

.banner-start h3 {
  display: inline-block;
}

.banner-start i {
  padding: 0 6px;
}

.banner-middle {
  flex: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default">
  <div class="panel-body">
    <div class="banner">
      <div class="banner-start">
        <i class="fa fa-phone fa-2x"></i>
        <h3>Call us</h3>
      </div>
      <div class="banner-middle">

      </div>
      <div class="banner-end">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default"><a href="tel:">Click the button to call us</a>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 5

如果你的 fontawesome 的字体大小与你的文本的字体大小相同（这通常是好的做法），有一个非常简单的方法，在文本标签中包含标签：

<p>
  <i class="fa fa-check"></i>
 Text text text
</p>

Answer 6

有时您可能需要为项目添加位置。如果两个元素都在同一列或 div 和 Picture/Icon 大于这样的东西应该可以工作。

.position-fix { position: sticky; top: 50%; }

对齐 FontAwesome 图标旁边的文本

Align Text Beside FontAwesome Icon

html

css

twitter-bootstrap

font-awesome