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?)

Daniel
  • 782
  • 2
  • 6
  • 24
  • 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 04 '13 at 14:30
  • What's this `:before "Facebook"` `°?°` – Roko C. Buljan Dec 07 '13 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 '13 at 06:12
  • Gotcha thanks, I promise I'll use Ch's DT more often than FBug. – Roko C. Buljan Dec 19 '13 at 06:14

1 Answers1

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

Community
  • 1
  • 1
Seanathon
  • 39
  • 5
  • 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: http://fontello.com/ – Daniel Jan 30 '14 at 05:39
  • Don't use text-indent: -9999px; It is horrible for SEO. You will get penalized when they catch you. – Keith.Abramo Jun 03 '14 at 18:07