对齐 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>

原文由 reece.78 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要对超赞字体图标的位置进行完全/独立的控制，请尝试以下操作。

方法一： 使用 absolute positioning

1. 添加 position with a property value relative 到 h3 样式 control.overlap-to-overlap-to

2. 使用 :after 选择器 content 插入图标

3. 添加 position with a property value absolute CSS-after-39 代码块的 h3

4. 使用 left、right、top 或 bottom 属性值实现所需的位置。

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

1. 使用 :after 选择器 content 值插入图标

2. 通过将 :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>

注意： 您可以使用 CSS font-size 属性值调整图标的大小。

原文由 Sleek Geek 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 Maxime Boué 发布，翻译遵循 CC BY-SA 3.0 许可协议