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):
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?
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.
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.