how to get both icon and heading in same line in css

Question

I want to icon and the headings in the same line like this:

but I still got like this:

The Code:

.icon-small i{
  height: 38px;  
  width: 38px; 
  color: #fff;
  background-color: #888;
  border-radius: 10%;
  text-align: center;
  vertical-align: middle;
  padding-top: 12px;

}
.icon-small + p{
  margin-top: 15px;

}
.icon-small h4,
.icon-small h5{
  text-align: left;
}

<div class="row">
  <div class="col span-1-of-3">
    <span class="icon-small">
      <i class="fa fa-television"></i>
      <h4>Web applications</h4>
      <h5>Mobile & Tablets Ready</h5>
    </span>
    <p>Powerful, fast and robust web applications to cater for complex business needs.</p>
  </div>
  <div class="col span-1-of-3">
    <span class="icon-small">
      <i class="fa fa-mobile-phone"></i>
      <h4>Mobile apps</h4>
      <h5>For the iPhone, iPad & Android</h5>
    </span>
    <p>Apps that connect directly to your customers.</p>
  </div> 
  <div class="col span-1-of-3">
    <span class="icon-small">
      <i class="fa fa-image"></i>
      <h4> Graphic </h4>
      <h5>Infographics, site designs and more</h5>
    </span>
    <p>Let our graphics speak the thousand words that you simply don't have the time to say.</p> 
  </div>
</div>

I just few things but it not worked. I used Font Awesome and responsive grid system.

I used this to reset the default styles:

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

please refer this page http://stackoverflow.com/questions/11701311/logo-image-and-h1-heading-on-the-same-line — Ivin Raj, Mar 22 '16 at 14:05

score 6 · Accepted Answer · answered Mar 22 '16 at 14:04

6

I think you want to float the icon:

.icon-small i {
    float: left;
    margin-right: 10px;
    /* ... */
}

And for good measure:

.icon-small + p {
    clear: left;
    /* ... */
}

https://jsfiddle.net/mblase75/e42rsw04/

answered Mar 22 '16 at 14:04

Blazemonger

90,923
26
142
180

score 2 · Answer 2 · answered Mar 22 '16 at 14:04

You can either use display:inline-block on the parent and display:inline on the children - or, you can use the :before pseudoclass and position it using absolute positioning.

<div class="logo">
    <div class="text">Some Text</div>
</div>

.text{
    position:relative;
}

.text::before {
    position:absolute;
    margin-left: -30px;
    background-image: url("youricon.png");
    background-color: #fff;
    height:<<height of your icon goes here>>;
    width:<<width of your icon goes here>>;
}

OR

<div class="logo">
    <div class="icon"><img src="youricon.png" alt="Logo"></div>
    <div class="text">Some Text</div>
</div>


.logo{
    display: inline-block;
    width: 100%;
}

.icon, .text {
    display:inline;
}

.text{
    margin-left:10px;
}

score 0 · Answer 3 · answered Mar 22 '16 at 13:58

Just use position:absolute for the icon inside the icon-text block.

.icon-small {
    position: relative;
    padding: 0 0 0 48px; /* 38px icon width + 10px gap between icon and text */
}

.icon-small i {
    height: 38px;  
    width: 38px;
    position: absolute;
    left: 0;
    top: 0;
}

score 0 · Answer 4 · answered Mar 22 '16 at 14:37

Since no one suggested using flexbox take a look into this http://jsfiddle.net/hnsd4np6/2/

<div class="row container">
 <div class="col span-1-of-3 box">
   <span class="icon-small">
   <i class="fa fa-television"></i>
  <div class="details">
    <h4>Web applications</h4>
    <h5>Mobile & Tablets Ready</h5>
  </div>
</span>
<p>Powerful, fast and robust web applications to cater for complex business needs.</p>
</div>
<div class="col span-1-of-3 box">
  <span class="icon-small">
    <i class="fa fa-mobile-phone"></i>
    <div class="details">
      <h4>Mobile apps</h4>
      <h5>For the iPhone, iPad & Android</h5>
   </div>
</span>
<p>Apps that connect directly to your customers.</p>
</div> 
 <div class="col span-1-of-3 box">
   <span class="icon-small">
     <i class="fa fa-image"></i>
    <div class="details">
      <h4> Graphic </h4>
      <h5>Infographics, site designs and more</h5>
   </div>
</span>
</div>
</div>

Some of the thing newly added in the html part are

added class container to the class row
added a class box to class col span-1-of-3 to to separate each product separately
Added class details to separate the icon and its descriptions

CSS

styles for the above newly added classes

.icon-small{
 display:flex;
flex-direction:row;
align-items:center;
}
  .details{
    padding:0 1em;
  }
.box{
    border:1px solid #333;
    background-color:#fff;
    width:300px;
    padding:1em;
   }
  .container{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    border:1px solid #333;
    background-color:powderblue;
   }

<br>

if you want to know more about flexbox clickhere

how to get both icon and heading in same line in css

4 Answers4