Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS List Style Image Issue

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #40222
    TWG
    Participant

    I’ve used images in place of list style default icons before with no issue. For some reason, probably simple & dump, I can’t get this one to work properly. I’m wanting the text to show directly to the right of the new icon image. I have the code over @ [codepen](http://codepen.io/anon/full/Jktmh “Code @ Codepen”).

    HTML

    <ul>
    <li><a href="#"><h6>Test Item</h6><span>October 1</span></a></li>
    <li><a href="#"><h6>Test Item</h6><span>October 3</span></a></li>
    <li><a href="#"><h6>Test Item</h6><span>October 5</span></a></li>
    </ul>

    CSS

    li { list-style-image: url('http://cdn4.iconfinder.com/data/icons/cologne/32x32/calendar.png'); }
    li a { vertical-align: top; }
    li h6 { font-size: 14px; margin: 0px; }
    li span { font-size: 12px; }
    a { text-decoration: none; }

    #111553
    chrisburton
    Participant

    @Maddtechwf Someone might be able to improve this: http://codepen.io/anon/pen/gBLGs

    #111555
    Paulie_D
    Member

    @ChristopherBurton

    Looks good to me.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.