Using CSS to replace text with icons?

  • I’ve been poring over the manuals, but can’t see how to do this. I know it is possible to replace a block of text with an arbitrary image using CSS, but that’s not what I’m shooting for.

    What I want is something like this:

    <span id=”rating”>***</span>

    And then a CSS rule for #rating that turns each individual asterisk into a specified image.

    Doable?

    The blog I need help with is: (visible only to logged in users)

  • Yes, it is, but you’d need to do it for every asterisk individually, something like this:

    <span class="rating">*</span><span class="rating">*</span><span class="rating">*</span>

    OR

    You could have, let’s say, 5 different rating classes, for example:

    <span class="r3">*</span>

    which would display 3 stars

    <span class="r5">*</span>

    which would display 5 stars, etc.

  • Hmmm, I was hoping for more of a search-and-replace function… gotta get around the lack of JavaScript somehow. ;-)

    Thanks anyway.

  • The topic ‘Using CSS to replace text with icons?’ is closed to new replies.