Html 在 FontAwesome 图标旁边对齐文本

Align Text Beside FontAwesome Icon

提问by reece.78

Hi I'm having trouble trying to align text beside a font awesome icon I've tried a few things but non of them seem to be working what i'm trying to do is make a panel with a button on one side that you can click and it calls the number with the fontawesome icon and text on the other side of the panel (I'm using bootstrap v3.3.2 to build it)

嗨，我在尝试对齐字体真棒图标旁边的文本时遇到了麻烦单击它，它会在面板的另一侧调用带有 fontawesome 图标和文本的数字（我正在使用 bootstrap v3.3.2 来构建它）

Here an image I've what I'm trying to do

这是我正在尝试做的图像

and here an image of what it currently looks like

这是它目前的样子

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

采纳答案by Sleek Geek

To have complete/independent control on the position of the font-awesome icon, try something like below.

要完全/独立控制 font-awesome 图标的位置，请尝试以下操作。

Method 1:Using absolute positioning

方法一：使用absolute positioning

1. Add position witha property valueof relativeto the h3style to control overlap.

2. Use :afterselector contentto insert the icon

3. Add position witha property valueof absoluteto the h3:after block of CSS code

4. Achieve the desired position with left, right, top or bottom property values.

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

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

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

4. 使用左、右、顶部或底部属性值实现所需的位置。

Method 2:Using float(Easier).

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

1. Use :afterselector contentvalue to insert the icon

2. Achieve the desired position of the icon by floating the :beforeselector to the right or left.

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>

Note:You can adjust the size of the icon with CSS font-sizeproperty value.

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

回答by Maxime Boué

There is a very easy way if your fontawesome has the same font-size than your text (it is usually the good practice), include the tags in the text tags:

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

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

回答by kjdion84

Use the .media class.

使用 .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>

回答by Thibault Henry

Try this :

尝试这个 ：

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

回答by Ryan H.

For posterity, if you are willing to go with CSS flexbox, aligning icons besides text is trivial.

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

I've kept Bootstrap and its Panel as part of the solution in the spirit of answering the original question.

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

The key points to note here are:

这里需要注意的关键点是：

• display: flexto make direct children flow in the default direction (row)
• align-items: centerto align along the flex direction (vertical align in this case)
• flex: 1to get the middle section to expand as much as possible, pushing the two sides apart

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

回答by Janis Tihonovs

Sometimes you might need to add position to item. If both elements are on the same column or div and Picture/Icon is larger than something like this should work.

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

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

.position-fix { 位置：粘性；顶部：50%；}