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