CODEWITHSUNDEEP
htmlcss
user3052443
user3052443

Reputation: 854

Add font awesome icon in middle of horizontal line

I am trying to draw a horizontal line for about 40% of the width, then show a font awesome icon and then the line again for the remaining 40%. The following shows what I have so far. But you can see https://jsfiddle.net/hyo0ezeo/, it isn't anywhere close to what I describe. Would someone please point out the correct way to do this?

CSS

h2 {
  width: 30%; 
  text-align: center; 
  border-bottom: 1px solid red; 
  line-height: 0.1em;
  margin: 10px 0 ; 
}

HTML

<div>
  <h2>
    <span class="fa fa-arrows-alt" aria-hidden="true" style="margin:10px 0"></span>
  </h2>
</div>

Upvotes: 1

Views: 10523

Answers (3)

Hunter Turner
Hunter Turner

Reputation: 6904

You'll need to make a container that holds the two borders and the icon. Then you can give the span's display: inline-block; and vertical-align: middle;

div {
  text-align: center;
}

span {
  display: inline-block;
  vertical-align: middle;
}

.outer-line {
  width: 40%;
  border-bottom: 1px solid red;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div>
  <span class="outer-line"></span>
  <span class="fa fa-rebel" aria-hidden="true"></span>
  <span class="outer-line"></span>
</div>

JSFiddle

Upvotes: 10

Andrej
Andrej

Reputation: 74

How about something like this?

.container {
  background: #f4f4f4;  
  width: 100%;
  height: 500px;
  padding: 60px;
}

span {
  margin: auto;
  width: 60px;
  height: 60px;
  position: relative;
  display: block;
  text-align: center;
}

span:before, span:after {
  content: '';
  width: 120px;
  transform: translateY( 7px );
  height: 1px;
  background: #ccc;
  position: absolute;
}

span:before {
right: 100%;  
}
span:after {
left: 100%;  
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>


<div class="container">
  <span> 
    <i class="fa fa-arrows" aria-hidden="true"></i> 
  </span>
</div>

Upvotes: 0

Mahmoud Wagdi Al-Awadi
Mahmoud Wagdi Al-Awadi

Reputation: 178

Give that div a class:

<div class="container"><h2><span class="fa fa-arrows-alt" aria-hidden="true" style="margin:10px 0"></span> </h2></div>

Use before and after as lines:

.container:before{
content: "";
height: 1px;
background: black;
float:left;
width:40%;
}
.container:after{
content: "";
height: 1px;
background: black;
float:left;
width: 40%;
}

Upvotes: 1

Related Questions