- This topic is empty.
-
AuthorPosts
-
October 1, 2015 at 6:44 am #209050grimskiParticipant
Hi there
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.<ul> <li><a href="#" title="TITLE TEXT." class="icon-facebook">Facebook</a></li> <li><a href="#" title="TITLE TEXT." class="icon-google">Google+</a></li> <li><a href="#" title="TITLE TEXT." class="icon-linkedin">LinkedIn</a></li> </ul>
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!Can anyone think of a way around this?
October 1, 2015 at 7:12 am #209051grimskiParticipantAs usually, couldn’t get this working at all then I stumble upon a possible solution. Could of sworn I’d tried this yesterday…
a { display: inline-block; overflow: hidden; text-indent: -9999px; } a:before { color: #fff; float: left; font-size: 18px; line-height: 16px; margin: 0; text-indent: 0; }
The
float: left;
is important.display: block;
kinda works but it pushes the text below the icon. As I don’t have a height set it’s partially visible. Imagine that approach could work if you set a height. on the anchor.Does anyone see any flaws with this approach?
October 1, 2015 at 8:38 am #209055MottieMemberWhy do you even need the text inside the link? It’s in the title attribute, so I’m not sure why you’d need it.
As to your approach, I think the clickable area for each icon ends up being too small. I would set a width for each one. Maybe try something like this (demo)
a { font-size: 18px; width: 20px; white-space: nowrap; overflow: hidden; text-indent: 40px; } a:before { color: #00f; text-indent: 0; float: left; }
October 5, 2015 at 1:34 am #209243grimskiParticipantThere’s actually an issue with my code. Seems to work fine in everything by Firefox, where the icons don’t show.
@Mottie for accessibility reasons. For example if CSS didn’t load the content would still be accessible. As the icon uses a custom font/css to style it, nothing would be visible.Seeing as I’m having an issue in Firefox, maybe setting the width like you have done will be the best way forward.
January 5, 2017 at 4:16 pm #249737marblegravyParticipantI know this is an old thread but I thought I’d offer my demo of how I got this working for future lurkers:
http://codepen.io/marblegravy/pen/BpyWLE
Essentially a combo of text-indent -9999px on the main text and +9999px on the :before
August 6, 2018 at 8:08 am #275057numerosataParticipantHi! What about something like this?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.