2

My HTML is like this:

<li><a href="fbpage" class="icon-facebook">Facebook</a></li>

I'm using the fontello icon font system however, I can't seem to work out how to make the word Facebook disappear and the icon remain! The generated content looks like this:

<li><a href="fbpage" class="icon-facebook">:before "Facebook"</a></li>

Thanks

(note: I know I can add a span to the text and toggle it but I thought there may have been a purely CSS way to do it?)

4
  • 1
    I'm sure this is explained on the web somewhere but I just can't seem to put my finger on a tutorial. I either get text-indent solutions or additional markup (like span tags).
    – Daniel
    Dec 4, 2013 at 14:30
  • What's this :before "Facebook" °?° Dec 7, 2013 at 15:09
  • That's what you see in the DOM when looking at it in the WebKit inspector ('Developer Tools' on Chrome). This is different from the source as it shows generated content and manipulations.
    – Daniel
    Dec 19, 2013 at 6:12
  • Gotcha thanks, I promise I'll use Ch's DT more often than FBug. Dec 19, 2013 at 6:14

1 Answer 1

0

This is one way

.icon-facebook {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width: 600px;
    white-space: nowrap;            /* because only the first line is indented */
}

.icon-facebook {
    outline: none;  /* prevents dotted line when link is active */
}

and there's also another. I found this question answered here: Hide text using css

2
  • Thanks but there is no background image. The Fontello font system turns vector artwork into a font. You can then add characters to the html via the :before pseudo selector. My question was aiming to find out if pure css could be used to target the text only separate from the generated CSS "text" (or rather, icon that is text). Read more about it here: fontello.com
    – Daniel
    Jan 30, 2014 at 5:39
  • Don't use text-indent: -9999px; It is horrible for SEO. You will get penalized when they catch you. Jun 3, 2014 at 18:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.