如何使图标坚持他们的文本？

Question

我正在尝试构建一个响应式上层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:[email protected]"> [email protected]</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

Answer 1

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

<span class="text-nowrap">
    <i class="far fa-envelope"></i>
    <a href="mailto:[email protected]"> [email protected]</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:[email protected]"> [email protected]</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>

Answer 2

我建议你可以这样做：

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

Answer 3

请尝试这种方式。

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:[email protected]"> [email protected]</a></span>
</div>