Add font awesome icon before heading? - html

Question

I am trying to design my own homepage and using this Read-Only template.
I want to customize my headings a little bit so it would have an icon before.
Here is my code
.icon {
text-decoration: none;
text-size: 1em;
display: inline;
margin: 0 0 1.5em 0;
padding: 0.35em 0 0 3.5em;
position: relative;
vertical-align: baseline;
height: 0.5em;
width: 48%;
}
.icon:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
background: #4acaa8;
border-radius: 100%;
color: #ffffff;
display: inline-block;
height: 2.5em;
left: 0;
line-height: 2.5em;
position: absolute;
text-align: center;
top: 0;
width: 2.5em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="icon fa-rss"></span> </i> <h3 style="display: inline">First Blog</h3>
<p>This is the first blog<p>
<h3>Second Blog<h3>
<p>This is the second blog<p>
But, the icon and the first heading seem not vertically aligned. Also, how to adjust the size of the icon?
Any help would be highly appreciated!

Answer 1

Set the heading after the icon to display: inline-block
Remove position: absolute from ::before, and instead set it to display: inline-block
Remove margins and paddings from .icon, and use width property to define how much space it takes up
Use font-size to change icon size. (not text-size)
i+h3 {
display: inline-block;
}
.icon {
text-decoration: none;
font-size: 1em;
/* edit this to change the size of the icon */
display: inline-block;
width: 3em;
position: relative;
}
.icon:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
background: #4acaa8;
border-radius: 100%;
color: #ffffff;
display: inline-block;
line-height: 2.5em;
text-align: center;
width: 2.5em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="icon fa-rss"></span> </i>
<h3>First Blog</h3>
<p>This is the first blog
<p>
<h3>Second Blog
<h3>
<p>This is the second blog
<p>
Instead of using the adjacent selector, you can add a class to any h3 that follows an icon, and then apply styles to the class instead.
example
HTML
<i class="icon fa-rss"></i>
<h3 class="icon-heading">First Blog</h3>
CSS
.icon-heading {
display: inline-block;
}