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

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>