CODEWITHSUNDEEP
bootstrap-4
Mena
Mena

Reputation: 2029

How to display text and icon on the same line

I'm working with bootstrap 4 and fontawesome and want to display text and an icon on the same line. The text should be on the left corner while the icon at the right corner. At the moment, I'm unable to keep both text and icon on the same line, the icon seems to move to a line below the text. How can i fix this?

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="card-header">
      <span class="d-inline">Cars waiting pedestrians cross the street</span>
      <span class="d-inline btn d-flex justify-content-end">
          <i class="fas fa-angle-down"></i>
      </span>
    </div>

Upvotes: 4

Views: 25102

Answers (3)

Clint
Clint

Reputation: 1

Font Awesome now has a native way to do this. If you just see their docs here you add a class to the <ul> tag and within the <li> tags and it puts them next to each other!

https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/icons-in-a-list

Upvotes: 0

mcbrent
mcbrent

Reputation: 301

Try this one. I've removed d-flex, replaced justify-content-end with float-right and d-inline to d-inline-block 

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="card-header">
      <span class="d-inline-block">Cars waiting pedestrians cross the street</span>
      <span class="d-inline-block btn float-right">
          <i class="fas fa-angle-down"></i>
      </span>
  </div>

Upvotes: 13

AD8
AD8

Reputation: 2208

Will this help?

<div class="card-header">
  <span class="d-inline">Cars waiting pedestrians cross the street

    <span class="d-inline btn float-right">
      <i class="fas fa-angle-down"></i>
   </span>

  </span>
</div>

Edit : Per HTML specifications, it is valid to have a span inside span. Read this SO Post Can you have <span> within <span>? for more information on creating nested span.

Edit 2: added class float-right to inner span to make arrow appear on the right side

Upvotes: 0

Related Questions