How can I make a line after the header with the font, which is an awesome icon in the middle?

Question

I'm trying to do the same thing as in the photos, but I really don't know how to do it

Therefore, I should have this line with any font icon in the middle.

Here is 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 is my violin

Hope you can help.

Answer 1

By providing h1a border-bottomand placing the icon :afterin the center inside. Also apply a white background to make sure the line is 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;
}

Refresh script

Answer 2

... , , . , (, , 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>

Hide result

Answer 3

HTML :

<h1 class="styled-heading">
  Welcome to HTML and CSS

  <span class="fa fa-hand-peace-o"></span>
</h1>

h1 :before :after .

-. - , .

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>

Hide result