在FontAwesome图标旁边对齐文本

Question

嗨,我在尝试将文字对齐在一个字体真棒图标旁边时遇到了麻烦我已经尝试了一些东西但是它们似乎没有工作我正在尝试做的是制作一个带有一个按钮的面板,你可以单击并使用面板另一侧的fontawesome图标和文本调用该数字(我正在使用bootstrap v3.3.2来构建它)

这是一张我正在尝试做的图片 http://i.imgur.com/0yCsdyG.jpg

这里是一张目前看起来像 http://i.imgur.com/UpMj6eJ.jpg的图片

<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

要对字体 - 真棒图标的位置,外观和大小进行完全/独立控制,请尝试以下操作.

1. 添加position with一个property value的relative在h3风格,以控制重叠.

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

3. 添加position with一个property value的absolute到h3:CSS代码块之后

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

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

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

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

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

Answer 2

尝试这个 ：

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

Answer 3

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

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