Using CSS sprites

Original by reinie, 2017 

This summary note was Posted on

  1. The HTML (can set hover also etc..)
  2. [html]
    <ol>
    <li id="one">List item one.</li>
    <li id="two">List item two.</li>
    <li id="three">List item three.</li>
    </ol>

    [/html]

  3. The CSS
  4. [css]
    ol { list-style: none; }
    li {
    display: inline-block;
    width: 100px;
    padding-left: 20px;
    margin-right: 20px
    background-image: url(path/to/sprite);
    background-repeat: no-repeat;
    }
    #one { background-position: x y; }
    #two { background-position: x y; }
    #three { background-position: x y; }
    [/css]

You can even do animations here
More info there