0

I am trying to divide part of my page and center an icon between two divider lines. I figure I have to use ::before and ::after, so I wrote this

jsfiddle.net

i:after {
    background-color: #999;
    content: " ";
    display: inline-block;
    height: 3px;
    margin: 0 0 8px 20px;
    text-shadow: none;
    width: 100%;
}

i:before {
    background-color: #999;
    content: " ";
    display: inline-block;
    height: 3px;
    margin: 0 20px 8px 0;
    text-shadow: none;
    width: 100%;
}

In jsfiddle it doesn't seem to work at all. But when I open the index file in chrome it works to a point. It will show a line to the left and right of the icon, but it won't have it fill the whole body div. Any ideas would be great.

Ravimallya
  • 6,550
  • 2
  • 41
  • 75
lemoneybob
  • 1

1 Answers1

0

if u use font-awesome u can add icon like this in your menu

this is just example :

<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-about"></i>About</li>
<li><i class="fa fa-contact"></i>Contact</li>

i see your file on jsfiddle..

more about font-awesome you can see on this..

http://fontawesome.io/

Jimbo
  • 49
  • 8