Блог

Я пытаюсь разместить значки с правой стороны текстов, как это

Но это только то, что мне удалось получить

Я пытался использовать float: left <i> теги, но это не помогло

код:

 <div class="box">
    <i class="far fa-eye fa-2x"></i>
    <h3>Elementum laoreet</h3>
    <p>Cras aliquet et mi id fermentum suspendise egget sodales lorem, vestibulum euismod lectus.</p>
</div>
<div class="box">
    <i class="far fa-eye fa-2x"></i>
    <h3>Elementum laoreet</h3>
    <p>Cras aliquet et mi id fermentum suspendise egget sodales lorem, vestibulum euismod lectus.</p>
</div>
<div class="box">
    <i class="far fa-eye fa-2x"></i>
    <div class="text">
    <h3>Elementum laoreet</h3>
    <p>Cras aliquet et mi id fermentum suspendise egget sodales lorem, vestibulum euismod lectus.</p>
    </div>
</div>
 

 .box{
  float: right;
  width: 33.3%;
  padding: 50px;
}
i{
  color: red;
  float: left;
}
 

Макет на основе гибкого трубопровода был бы подходящим. Попробуйте использовать что-то вроде этого:

 .box {
  display: flex;
  align-items: flex-start;
}
.box i {
  border: solid 1px #e2e2e2;
  height: 40px;
  width: 40px;
  flex: 0 0 40px;
  margin-right: 20px;
  line-height: 40px;
  border-radius: 50%;
  text-align: center;
}
.box h3 {
  margin-top: 0;
  margin-bottom: 0;
} 

 <link href="https://use.fontawesome.com/releases/v5.0.1/css/fontawesome.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.1/css/solid.css" rel="stylesheet">
<div class="box">
    <i class="fa fa-eye fa-x2"></i>
  <div>
    <h3>Elementum laoreet</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur interdum suscipit vulputate.</p>
  </div>
</div>