1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.
  2. Better Analytics for WordPress Get It Free

Changing Bullets for Icons?

Discussion in 'CSS' started by Las Vegas DUI Lawyer, Apr 25, 2011.

  1. #1
    How Do I Change Individual Icons for Bullets in an Unordered List?

    It sounds easy but, everyone seems to fall short of an explanation when they talk about changing the bullets in an unordered list. Oh, they go into vast detail about throwing it up in an external CSS style sheet for one icon for all the bullets:

    
    li {
    background-image: url(custombullet.gif);
    background-position: center left;
    background-repeat: no-repeat;
    padding-left: 20px;
    list-style: none;
    }
    
    HTML:
    or
    
    li {
    background:url(custombullet.gif) center left no-repeat;
    padding-left: 20px;
    list-style: none;
    }
    
    HTML:
    But when it comes to explaining about how to change one image per one bullet, they just MENTION you can use SPAN. In fact their explanations are so lame they simply show examples of one icon.:mad:

    But of course, I am not just asking to put an icon in place of a bullet. You knew that right? I am asking how to place an icon in place of a bullet that is a link. :confused:
     
    Las Vegas DUI Lawyer, Apr 25, 2011 IP
  2. extremike

    extremike Peon

    Messages:
    44
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Not sure what you mean by this?
    It is possible to style each bullet differently, but before I go into it please just clarify that that is what you're trying to achieve. On a side note, not the nicest way to refer to guys that are putting effort in to try to help you out...
     
    extremike, Apr 27, 2011 IP
  3. Las Vegas DUI Lawyer

    Las Vegas DUI Lawyer Peon

    Messages:
    243
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #3
    well i dont' consider a page with "oh you can change the bullet with an image with span" and that's IT, as being very helpful.

    Yes, for instance: if i had a website for traveling and the motif was airplane / airport stuff -
    - icon of a airplane
    - icon of ticket agent
    - icon of pilot
    - icon of luggage

    Like that.
     
    Las Vegas DUI Lawyer, Apr 27, 2011 IP
  4. extremike

    extremike Peon

    Messages:
    44
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    If you're looking for a list with different bullet images then you can do it simply by styling each <li> differently:

    Stylesheet:
    .airplane { list-style-image:url(airplane.jpg); list-style-position:outside;}
    .ticket { list-style-image:url(ticket.jpg); list-style-position:outside;}
    .pilot { list-style-image:url(pilot.jpg); list-style-position:outside;}
    .luggage { list-style-image:url(luggage.jpg); list-style-position:outside;}
    Code (markup):
    HTML:
    <ul>
    <li class="airplane">Bullet 1 Text</li>
    <li class="ticket">Bullet 2 Text</li>
    <li class="pilot">Bullet 3 Text</li>
    <li class="luggage">Bullet 4 Text</li>
    </ul>
    Code (markup):
    BUT
    If you only want to have images showing (each <li> without any text), with the images as links, I'd just drop each icon image into an unordered list and link it as appropriate.

    Is this of any use?
     
    extremike, Apr 28, 2011 IP
  5. sburst

    sburst Peon

    Messages:
    39
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    So non-link list items have a bullet and links have an icon right?

    use 'li a' to control the bullet for a list item link, and just 'li' for the list item.
     
    sburst, May 12, 2011 IP
  6. Las Vegas DUI Lawyer

    Las Vegas DUI Lawyer Peon

    Messages:
    243
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I came up with this:

    
    <ul id="menulist">
            <li><span class="home"><a href="index.html">Home</a></span></li>
            <li><span class="community"><a href="community.html">Community</a></span></li>
            <li><span class="news"><a href="news.html">News</a></span></li>
            <li><span class="marketplace"><a href="marketplace.html">Marketplace</a></span></li>
            <li><span class="trade"><a href="trade.html">Trade</a></span></li>
            <li><span class="Shop"><a href="shop.php" class="shop">Shop</a></span></li>
    </ul>
    
    HTML:
    Then I did the css like this, it might be bloated but this is what I came up with:
    
    .home {
    	padding-left:33px;
    	padding-top:10px;
    	padding-bottom:10px;
    	background-image:  url(royal_My-computer-32.png);
    	background-repeat:no-repeat;
    	background-position:0 .5em;
    }
    
    .community{
    	padding-left:33px;
    	padding-top:10px;
    	padding-bottom:10px;
    	background-image:  url(royal_User-32.png);
    	background-repeat:no-repeat;
    	background-position:0 .5em;
    }
    
    .news{
    	padding-left:33px;
    	padding-top:10px;
    	padding-bottom:10px;
    	background-image: url(royal_Mail-32.png) ;
    	background-repeat:no-repeat;
    	background-position:0 .5em;
    }
    
    .marketplace{
    	padding-left:33px;
    	padding-top:10px;
    	padding-bottom:10px;
    	background-image:  url(royal_Internet-32.png);
    	background-repeat:no-repeat;
    	background-position:0 .5em;
    }
    
    .trade{
    	padding-left:33px;
    	padding-top:10px;
    	padding-bottom:10px;
    	background-image:  url(royal_Browser-32.png);
    	background-repeat:no-repeat;
    	background-position:0 .5em;
    }
    
    .shop{
    	padding-left:33px;
    	padding-top:10px;
    	padding-bottom:10px;
    	background-image:  url(royal_search-32.png);
    	background-repeat:no-repeat;
    	background-position:0 .5em;
    }
    
    HTML:
    I'm sure this is overkill, but this is what I came up with. It shows a nice icon next to the linked word. I could probably make this even cooler, by doing maybe a mouseover with a slight background "glow" color behind the icon or something. just thought about that, no idea how to do it, but I'll see.
     
    Las Vegas DUI Lawyer, May 13, 2011 IP