Forums

Give help. Get help.

  • # October 1, 2015 at 6:44 am

    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

    As 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

    Why 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

    There’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

    I know this is an old thread but I thought I’d offer my demo of how I got this working for future lurkers:

    Essentially a combo of text-indent -9999px on the main text and +9999px on the :before

    # August 6, 2018 at 8:08 am

    Hi! What about something like this?

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag