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

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

将position with property value relative h3添加到:after样式以控制重叠。
使用content选择器position with插入图标
将property value absolute h3 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代码块之后
使用left，right，top或bottom属性值实现所需位置。

＆＃13;

font-size

＆＃13;

{{1}}

＆＃13;

注意：您可以使用CSS {{1}}属性值调整图标的大小。

Answer 2

试试这个：

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

Answer 3

使用.media类。

<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

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

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

Answer 5

对于后人来说，如果你愿意使用CSS flexbox，那么除了文本之外对齐图标也是微不足道的。

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

这里要注意的要点是：

display: flex让直接孩子沿默认方向（行）流动
align-items: center沿着弯曲方向对齐（在这种情况下为垂直对齐）
flex: 1让中间部分尽可能扩大，推动双方分开

＆＃13;

.banner {
  display: flex;
  align-items: center;
}

.banner-start h3 {
  display: inline-block;
}

.banner-start i {
  padding: 0 6px;
}

.banner-middle {
  flex: 1;
}

＆＃13;

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

＆＃13;

Answer 6

有时您可能需要在商品上添加位置。如果两个元素都在同一列或div上，并且“图片/图标”大于此类值，则应该起作用。

.position-fix {位置：粘性；最高：50％； }

在FontAwesome图标旁边对齐文本

6 个答案: