Position font-awesome next to the text

Navigation
1

I have some arrows that need to be positioned next to the text, but not along with it. Next to it.

ButIdonotknowhowtopositionthemthere,atthemomentI'mputtingtheminsidepandit'sgettingatthebeginningofthetextwithaparagraph.Youneedtoleavethemoffandonlypositionednext,Itriedwithadivoutside,butthenitbreaksdownandthearrowisontopandthetextbelow.

Howitiscurrently.

HTML:

<divclass="col-md-12">
    <div class="row">
      <div class="col-md-6">
        <img class="img-fluid mr-5" src="img/img-servico-1.jpg" alt="Estádio de futebol">
      </div>
      <div class="col-md-6">
        <h4 class="text-left">Lorem, ipsum dolor.</h4>
        <h6 class="text-left mb-5">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores libero aliquid odio. Magnam, accusamus atque. Fugit culpa rem assumenda, eaque beatae, illo consequuntur odio ullam debitis praesentium eos! Laboriosam, dolores!</h6>
        <p class="text-left"><i class="fas fa-angle-right mr-2"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas aperiam eius doloremque odio aspernatur itaque ratione fugit quasi? Consequuntur tempora eos id porro aliquam ratione deserunt odit, quibusdam optio reprehenderit.</p>
        <br>
        <p class="text-left">
          <i class="fas fa-angle-right mr-2"></i>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad, eius. Minus, non nam! Placeat eveniet architecto distinctio laboriosam animi facilis magnam, sunt corporis dicta nisi non inventore, minima repudiandae? Expedita!</p>
        <br>
        <p class="text-left">
          <i class="fas fa-angle-right mr-2"></i>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem odit fugit quibusdam ipsum. Sapiente facere ut rerum quibusdam ipsa quos voluptatibus. At quas nesciunt dolore repudiandae. Laudantium harum saepe deleniti!</p>
      </div>
    </div>
  </div>

Another problem I need to make the image bigger is to find the other one on the other side, but the class img-fluid makes it very small.

    
asked by anonymous 21.12.2018 / 13:57

1 answer

2

The Fontawesome icons are the easiest way to adjust my view to create a UL/LI with the icon inside, so you can use the Margin classes of Bootstrap type mr-x and mt-x etc to fit everything, you must put each LI with d-flex ( display:flex ) original Bootstrap class.

See the example as follows. You do not need extra CSS, it's all with BS4's default classes 

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<div class="col-md-12">
  <div class="row">
    <div class="col-md-6">
      <img class="img-fluid mr-5" src="img/img-servico-1.jpg" alt="Estádio de futebol">
    </div>
    <div class="col-md-6">
      <h4 class="text-left">Lorem, ipsum dolor.</h4>
      <h6 class="text-left mb-5">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores libero aliquid odio. Magnam, accusamus atque. Fugit culpa rem assumenda, eaque beatae, illo consequuntur odio ullam debitis praesentium eos! Laboriosam, dolores!</h6>
      <ul class="lista p-0 m-0">
        <li class="d-flex mb-2"><i class="fa fa-rocket mt-1 mr-2" aria-hidden="true"></i>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, maiores. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil, perspiciatis.</li>
        <li class="d-flex mb-2"><i class="fa fa-rocket mt-1 mr-2" aria-hidden="true"></i>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, maiores. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil, perspiciatis.</li>
        <li class="d-flex mb-2"><i class="fa fa-rocket mt-1 mr-2" aria-hidden="true"></i>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi, maiores. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil, perspiciatis.</li>
      </ul>
    </div>
  </div>
</div>
    
21.12.2018 / 14:29
Questions with insert Change username in Ubuntu [closed]