Well, you do have access to one more pseudo, the :after
You could certainly make use of it to keep from adding more elements to the html.
I glanced through the font awesome guide and I see how they use an <i> tag in the html and then they hook to it with a pseudo.
No need to clutter up the html when you still got an :after to work with. Then you CAN set your font-family: FontAwesome; on it and then use the encoded numbers in your content.
Just tested this with the ‘Home Icon’ \f015 and it works fine (doesn’t slide in but it could)…
keneso.zip (2.8 KB)
#fz-1 > a:before {background:rgba(219, 0, 114, 0.3); content:"Link \A One";} /*opacity was 0.7*/
#fz-2 > a:before {background:rgba(114, 43, 168, 0.3); content:"Link \A Two";}
#fz-3 > a:before {background:rgba(83, 32, 153, 0.3); content:"\00A0 Link \A Three";}
#fz-4 > a:before {background:rgba(0, 91, 154, 0.3); content:"Link \A Four";}
#fz-1 > a:after, #fz-2 > a:after,
#fz-3 > a:after, #fz-4 > a:after {
content:"";
position: absolute;
top:.25em; left:.25em;
font-family: FontAwesome;
font-size: 3em;
}
#fz-1 > a:after {content:"\f015";}
#fz-2 > a:after {content:"\f015";}
#fz-3 > a:after {content:"\f015";}
#fz-4 > a:after {content:"\f015";}