Skip to main content

Forums

This topic contains 5 replies, has 4 voices, and was last updated by  numerosata 9 months, 2 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #209050

    grimski
    Participant

    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?

    #209051

    grimski
    Participant

    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?

    #209055

    Mottie
    Moderator

    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;
    }
    
    #209243

    grimski
    Participant

    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.

    #249737

    marblegravy
    Participant

    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

    #275057

    numerosata
    Participant

    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-link icon-logo-star icon-search icon-star