Выровнять Текст Рядом Со Значком FontAwesome

Привет, у меня возникли проблемы с выравниванием текста рядом с удивительным значком шрифта я пробовал несколько вещей, но не из них, похоже, работает то, что я пытаюсь сделать, это сделать панель с кнопкой на одной стороне, которую вы можете нажать, и она вызывает номер с иконкой 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>

5 ответов


чтобы иметь полный / независимый контроль над положением, видом и размером значка шрифта, попробуйте что-то вроде ниже.

  1. добавить position with a property value of relative до h3 стиль для управления перекрытием.

  2. использовать :after селектор content вставить значок

  3. добавить position with a property value of 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 значение свойства.


попробуйте это :

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

существует очень простой способ, если ваш fontawesome имеет тот же размер шрифта, что и ваш текст (обычно это хорошая практика), включите теги в текстовые теги:

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

использовать .медиа-класс.

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

для потомков, если вы готовы пойти с 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>