如何使图标与文本保持一致？答案

【问题标题】：how to make icons stick with their texts?如何使图标与文本保持一致？
【发布时间】：2019-02-09 12:21:03
【问题描述】：

我正在尝试构建一个响应式的upper-headeras you see in this screenshot。

您看到消息图标的问题在其文本消失时保持挂起每当宽度在 757 和 575 之间时向下。

总的来说，我还是 css 和 bootstrap 4 的新手。

提前感谢您！

.upper-bar {
  font-family: Times;
  background-color: #007872;
  color: #fff;
}

.upper-bar a {
  color: #fff;
}

.upper-bar-left,
.upper-bar-right {
  margin: 15px 0;
  text-align: center;
  padding-left: 0;
}

@media (max-width: 575.98px) {
  .upper-bar-left:first-child,
  .upper-bar-right:first-child {
    margin-bottom: 0;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class="upper-bar">
  <div class="container">
    <div class="row">

      <div class="col-sm upper-bar-left text-sm-left">
        <i class="fa fa-phone"></i> 00000009890
        <i class="far fa-envelope"></i><a href="mailto:lorem_ipsuml@xxxxx.xx"> lorem_ipsuml@xxxxx.xx</a>
      </div>

      <div class="col-sm upper-bar-right text-sm-right">
        <i class="fas fa-map-marker"></i> LOrem Ipsum 0, 00098 Loremipsum
      </div>

    </div>
  </div>
</div>

Codepen: https://codepen.io/anon/pen/bxREoK?editors=1100

【问题讨论】：

我使用了与 codepen 中相同的信息。据我所知，codepen 也是公开的（因为我可以访问该信息），所以在 Stackoverflow 上发布它有什么不同（Stackoverflow 上的信息共享与 codepen 一样公开）。我仍然删除了那个答案并发布了一个新答案，只是为了你的利益:)
我看到了私人信息（号码、地址、电子邮件）。我不确定你是从我有的另一支笔上拿的还是我一分钟的眼睛有问题 XD。无论如何，非常感谢您的信息！和平！

标签： css sass bootstrap-4 font-awesome

【解决方案1】：

请尝试这种方式。

CSS 代码：

.left-style{
float:left;
}

HTML 代码：

<div class="col-sm upper-bar-left text-sm-left">
        <span class="left-style"><i class="fa fa-phone"></i> 00000009890</span>
        <span class="left-style"><i class="far fa-envelope"></i>
<a href="mailto:lorem_ipsuml@xxxxx.xx"> lorem_ipsuml@xxxxx.xx</a></span>
</div>

【讨论】：

【解决方案2】：

将信封图标和电子邮件锚点放在带有text-nowrap 类的范围内

<span class="text-nowrap">
    <i class="far fa-envelope"></i>
    <a href="mailto:lorem_ipsuml@xxxxx.xx"> lorem_ipsuml@xxxxx.xx</a>
</span>

有关 text-nowrap 的信息，请参阅 this

.upper-bar {
  font-family: Times;
  background-color: #007872;
  color: #fff;
}

.upper-bar a {
  color: #fff;
}

.upper-bar-left,
.upper-bar-right {
  margin: 15px 0;
  text-align: center;
  padding-left: 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<script src="https://use.fontawesome.com/2972279885.js"></script>

<div class="upper-bar">
  <div class="container">
    <div class="row">

      <div class="col-sm upper-bar-left text-sm-left">
        <i class="fa fa-phone"></i> 0542 1421455
        <span class="text-nowrap">
          <i class="fa fa-envelope"></i>
          <a href="mailto:lorem_ipsuml@xxxxx.xx"> lorem_ipsuml@xxxxx.xx</a>
         </span>
      </div>

      <div class="col-sm upper-bar-right text-sm-right">
        <i class="fas fa-map-marker"></i> LOrem Ipsum 0, 00098 Loremipsum
      </div>

    </div>
  </div>
</div>

【讨论】：

我还会考虑将“fa-fw”类添加到图标中，这样它们的宽度就会相等。当有多个图标在彼此下方/上方时看起来会更好。

【解决方案3】：

我建议你可以这样做：

html

<div class="icon-text">
<i class="fab fa-facebook-f">
<p> Your text</p>
</div>

css

.icon-text {
display: inline-block;
margin-right: 20px;
}

【讨论】：