Using CSS to replace text with icons?

  • Author
  • #417050

    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.


    The blog I need help with is



    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>


    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.