как сделать так, чтобы иконки прикреплялись к их текстам? - PullRequest
Новая
       12

как сделать так, чтобы иконки прикреплялись к их текстам?

0 голосов
/ 04 сентября 2018

Я пытаюсь создать отзывчивый верхний заголовок , как вы видите на этом скриншоте .

Проблема, как вы видите, значок сообщения остается зависшим, пока идет его текст вниз всякий раз, когда ширина между 757 и 575.

Я все еще новичок в css и начальной загрузке 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

Ответы [ 3 ]

0 голосов
/ 04 сентября 2018

Храните значок конверта и почтовый якорь в промежутке с классом 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>

См. this для получения информации о text-nowrap 

.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>
0 голосов
/ 04 сентября 2018

Пожалуйста, попробуйте этот способ.

Код 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>
0 голосов
/ 04 сентября 2018

Предлагаю сделать так:

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