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;
}
How do I align text and icon on the same line in CSS? If you want to make a text appear vertically aligned next to a Font Awesome icon, you can use the CSS vertical-align property set to “middle” and also, specify the line-height property. Change the size of the icon with the font-size property.
To get all elements to appear on one line the easiest way is to: Set white-space property to nowrap on a parent element; Have display: inline-block set on all child elements.
display: To display text and icons side by side, we will use the display: flex property. float: To set the icon on the right side of the div, we use float: right property.
Wrap both the title and the icon in a div with the class flex . This way they will be placed on the same line. You can also add justify-between to move the icon to the right corner.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With