I have a list which will display social media icons. I’m using font icons to achieve this (Fontello). Applying the relevant class to the anchor displays an icon using a font on the :before element. So I have the icon displayed alongside the text.
Now I want to hide the Facebook, Google+_ and LinkedIn text. I could just delete the text, which works, but I consider that to be bad practice of accessibility.
I thought I could use overflow: hidden; text-indent: -9999px; but this moves the :before element out of view as well. I could of sworn I’d found away around this on another project but for the life of me I can’t remember. I thought setting a certain display property, text-align: left; or floating it might work – but no joy!