Need space around Font Awesome icons with :before/:after border behind icons

So following this example, I’m trying to implement the same thing but with the use of Font Awesome. Successfully implemented, I’m seeing a solid line behind the Font Awesome icons. But the downside is that I want to add padding on each side of the icons to give some space (attachment shows the example I want to do):

Is there a way to add space?

My code:

<div class="moduletable cutlery">
<div class="custom">
    <p><span><i class="fa fa-cutlery"></i></span></p></div>
 </div>

CSS:

.cutlery {
    overflow: hidden;
    padding-top: 50px;
    padding-bottom: 50px;
}
.cutlery p {
    font-size: 68px;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    text-align: center;
    z-index: 1;
    color: #a7a7a7;
}
.cutlery p:before, .cutlery p:after {
    border-top: 1px solid #a7a7a7;
    content:"";
    margin: 0 auto;
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 95%;
    z-index: -1;
}
.cutlery p span {
    padding: 0 30px
}

You just need to give the span a solid background color - otherwise you can see the line going through.

http://codepen.io/ryanreese09/pen/xGwdmw

You can’t see the font icon load up on preview but just click on the codepen.

The background on the body of the paragraph is a pattern. I take it that I should apply a transparent pixel background in order to get the space I need for span?

I’d need to see your real world example to best advise you, instead of theoreticals :slight_smile: .

Here you are.
I’m using the same pattern as the body background to fill the span, but I’m going to try to place/rotate that background so it would line up with the rest of the pattern. Seems off unless you have an alternative suggestion.

You probably won’t be able to do it with that current structure.

@PaulOB What was the thread where we went over these line throughs? We had a bunch of examples. I can’t find the thread and he could probably use an alternate technique instead of this current one.

I’m almost headed home so it’d be a waste to start coding an alternative now.

Are you thinking of this one?

1 Like

Hey that example worked GREAT!

Thank you for the suggestion, gents!

Thanks for finding the thread @technobear .

1 Like

another approach, assuming your BG is the page’s BG ( otherwise the math is going to get COMPLEX) , would be to use background-position:fixed; on both the page BG and the element holding the icon. the BGs will then align to each other, giving the partial illusion of transparency.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.