Wosley Alarico Wosley Alarico - 11 days ago 7
CSS Question

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

Am trying to do the same as the photo shows but I don't really know how to do that

enter image description here

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

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