Position font-awesome next to text

Asked

Viewed 281 times

1

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

Flechas corretas

But I don’t know how to position them there, at the moment I’m putting them inside the p and is getting at the beginning of the text with a paragraph. You need to leave them out and only positioned beside, I tried with a div out, but then it breaks down and the arrow is up and the text is down.

Como esta

As she is now.

HTML:

<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>
        <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 that I need to let the bigger picture meet with the other one that comes below put on the other side, only the class img-fluid makes her too small.

  • Face on the list of icons I left the answer there in a better and more semantic way to do, Already on the image I did not understand right what you want... Avoid entering in two totally different subjects in a single question, this leaves things a little confused and is not good for the Q&A system, ideal is to separate your questions by Subject understands... But more details then I try to help you with that

  • @hugocsl Yes, my mistake, I will ask another question with the subject of the image.

  • That there, so it is better to answer you and keep each question within a defined scope, this is better even for the site SEO. When you give me a touch I give you a push, just put the code of your problem right

  • @hugocsl put the question there about the image. https://answall.com/q/352565/91948

1 answer

2


Face on the icons of the Fontawesome the easiest way for you to adjust to my view is to create a UL/LI with the icon inside, ai vc can use the classes of Margin bootstrap mr-x and mt-x etc to adjust everything, you also need to put each LI with d-flex (display:flex) original Bootstrap class.

Here’s how it looks. You don’t need extra CSS, it’s all about the classes default of BS4

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

  • 1

    And you can also add the class align-items-center in the <li class="d-flex mb-2"> to the FontAwesome be vertically centered

  • 1

    @Icaromartins that’s right! Since the display is already flex becomes easy this adjusts :D, is a good tip!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.