How to Make Bootstrap Icon Display Inline with Text in a Tag

How to make bootstrap icon display inline with text in a tag?

If your text can wrap as you said then this can work..

<span><i class="pull-right icon-chevron-right"></i>Some longer sample text</span>

Update:

<span class="iwt">
<span>Some longer sample text</span>
<i class="pull-right icon-chevron-right"></i>
</span>

.iwt{
display:block;
}

How to display text and icon on the same line

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>

Want to inline SVG ICON and text on same line html/css/bootstrap

Here you go...

You need to "separate" the image and the text into two columns inside the same row.

You do this with classes col-1 and col-11. As stated on Bootstrap's official website: There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., col-4 spans four).

So, 1+11=12.

Note: I changed your image with an image of a giraffe so you can see the result.

<!DOCTYPE html>
<html lang='en'>

<head>

  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl' crossorigin='anonymous'>

</head>

<body>

  <div class="row justtify-content-left icon1">
    <div class="col-1 icon1">
      <img src="https://animals.sandiegozoo.org/sites/default/files/2016-11/animals_hero_giraffe_1_0.jpg" width="30px" class="img-fluid icon1" alt="Sample Image">
    </div>
    <div class="col-11 icon1">
      <h5>INVESTMENT PLANNING</h5>
      <p>This handout will help you understand how paragraphs.</p>
    </div>
  </div>

</body>

</html>

Bootstrap a tag button with Icon and Text vertically align middle

.btn-giant {  display: flex!important;  flex-direction:column;  justify-content: center;  align-items: center;  float: left;  width: 120px;  height: 120px;  margin-bottom: 8px;  margin-right: 5px;  padding: 10px 15px;  font-size: 12px;  text-align: center;  color: white;  border-radius: 0;  white-space: normal;}
.btn-giant .glyphicon {  font-size: 36px;  display: block;  margin-bottom: .3em;}

<link href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /><script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script><script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>
<button class="btn btn-giant btn-primary" onclick="location.href='/Users';">    <span class="glyphicon glyphicon-user" aria-hidden="true"></span> Users</button>
<a class="btn btn-giant btn-primary" href="/Mail">  <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Mail</a>

Displaying Bootstrap Icon before text with CSS shows code instead icon

Use unicode instead. content:'' will treat code block as a text.

.normal-text{   border-left-width: 1px !important;   font-size: 110% !important;   color: #100cce;   font-family: 'Book Antiqua';}.normal-text::after{   content: "\270f";   font-family: 'Glyphicons Halflings';}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><blockquote class="normal-text"> Some Text </blockquote>

Bootstrap 4: Button align text with icon

Use align-middle class on the span and icon..

<div class="container">
    <a href="#" class="btn btn-primary border-0 rounded-0 p-0">
        <i class="fa fa-play align-middle" aria-hidden="true"></i>
        <span class="align-middle">Click here to Play</span>
    </a>
</div>

http://www.codeply.com/go/xuiy1703Dv

Align Text In Bootstrap Well Beside FontAwesome Icon

I would suggest you to make slight change in your html structure and wrap your text content inside the div and set its display as inline-block

<div class="col-md-4 none">
    <div class="well none">
        <i class="fa fa-user fa-4x fa-fw"></i>
        <div class="text">
           <h3>Test</h3>
           <p>text goes here</p>
        </div>
    </div>
</div>

and css for that additional div is

.text {
    display:inline-block;
}

Js Fiddle Demo

Display icons and text on the same line

I have achieved that with the following code:

.container-header{    line-height: 1.22;}#social_icons {    padding: .5em;    display: inline-block;}
.topmenu li {     display:inline-block;     font-size: 1.5em;     text-align: right;}.topmenu.omega{     float:right;}ul{     margin: 0;}li>a{    font-size: 20px;}

<div class="container-header">  <div class="grid_5" id="social_icons"> <a href="http://fontawesome.io/icon/address-book/" target="blank"><img src="img/facebook.png" alt="Facebook"></a> <a href="http://www.twitter.com/print3dexpert" target="blank"><img src="img/twitter.png" alt="Twitter"></a> <a href="http://pinterest.com/print3dexpert" target="blank"><img src="img/pinterest.png" alt="Pininterest"></a> <a href="#"><img src="img/email.png" title="Click to contact us" alt="Contact us"></a>
  </div>
  <nav class="topmenu omega"> <ul> <li><a href="#">Home</a> |</li> <li><a href="#">About Us</a> |</li> <li><a href="#">Cheeses</a></li> </ul>  </nav></div>

How to Make Bootstrap Icon Display Inline with Text in a Tag