How can I make a line after a heading with font awesome icon in the middle? - html

Question

Am trying to do the same as the photo shows but I don't really know how to do that
So I should be able to have that line with any fontawesome icon in the middle.
Here my initial markup:
<h1>Welcome</h1>
h1 {
font-size: 25pt;
display: inline-block;
margin: 0;
font-weight: 300;
}
h1:after {
content: '\f209';
font-family: FontAwesome;
display: block;
}
Here my fiddle
Hope you can help.

Answer 1

By giving your h1 a border-bottom and positioning your :after icon absolute in the center inside it. Also apply a white background to make sure the line gets interrupted.
h1 {
font-size: 25pt;
display: inline-block;
margin: 0;
font-weight: 300;
padding-bottom: 10px;
border-bottom: 1px solid #000;
}
h1:after {
content: '\f209';
position: absolute;
font-family: FontAwesome;
background-color: #FFF;
display: block;
margin-left: 50px;
}
Update fiddle

Answer 2

Well... the accepted answer works fine, but it involves set widths, and will need to be rewritten to cater for longer text in the heading. The following works regardless of width of text (it does, however, involve a little bit more HTML):
https://jsfiddle.net/jx4dv11g/3/
h1 {
font-size: 25pt;
margin: 0 auto;
font-weight: 300;
padding-bottom: 10px;
border-bottom: 1px solid #000;
text-align: center;
display: inline-block;
}
.headericon {
display: inline-block;
position: absolute;
}
.headericon i {
display: block;
margin-top: -25%;
background: white;
transform: translate(-50%,0);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<h1>Welcome to this page<br><span class="headericon"><i class="fa fa-hand-peace-o"></i></span></h1>

Answer 3

I'll suggest you to use following HTML structure for this:
<h1 class="styled-heading">
Welcome to HTML and CSS
<span class="fa fa-hand-peace-o"></span>
</h1>
Apply a class on h1 and use pseudo elements :before and :after to draw lines around icon.
This will allow you to have one time generic styling for all similar places in your web page. If you wants to use different icon in some other heading then all you need is just change the font awesome icon in that header.
body {
text-align: center;
margin: 0;
}
.styled-heading {
text-align: center;
font-size: 25pt;
display: inline-block;
margin: 0;
font-weight: 300;
position: relative;
overflow: hidden;
}
.styled-heading .fa {
display: block;
margin: 0 auto;
}
.styled-heading:before,
.styled-heading:after {
position: absolute;
background: black;
margin-left: 30px;
width: 999px;
height: 1px;
content: '';
bottom: 12px;
left: 50%;
}
.styled-heading:after {
margin-right: 30px;
margin-left: 0;
right: 50%;
left: auto;
}
.orange {
background: orange;
}
.green {
background: green;
}
.blue {
background: blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<h1 class="styled-heading">
Welcome to HTML and CSS
<span class="fa fa-hand-peace-o"></span>
</h1>
<div class="orange">
<h1 class="styled-heading">
Welcome To HTML and CSS.
<span class="fa fa-home"></span>
</h1>
</div>
<div class="blue">
<h1 class="styled-heading">
Welcome To HTML and CSS.
<span class="fa fa-globe"></span>
</h1>
</div>
<div class="green">
<h1 class="styled-heading">
Welcome To HTML and CSS.
<span class="fa fa-power-off"></span>
</h1>
</div>