How can I give each <li> its own bullet image?

<ul id="contact_list">
    <li id="phone">Local 604-555-5555</li>
    <li id="i18l_phone">Toll-Free 1-800-555-5555</li>
</ul>

#contact_list
{
    list-style: disc none inside;
}

#contact_list #phone
{
    list-style-image: url(images/small_wood_phone.png);
}

#contact_list #i18l_phone
{
    list-style-image: url(images/i18l_wood_phone.png);
}

<li id="phone" style="list-style-image: url(images/small_wood_phone.png);">Local 604-555-5555</li>

#contact_list li
{
    list-style: none;
}

#contact_list li#phone
{
    list-style-image: url(images/small_wood_phone.png);
}

#contact_list li#i18l_phone
{
    list-style-image: url(images/i18l_wood_phone.png);
}

#contact_list #phone
{
    list-style-image: url("/images/small_wood_phone.png");
}

#contact_list
{
  list-style: none;
}

#contact_list li {
  padding-left: 20px; /* assumes the icons are 16px */
}

#contact_list #phone
{
  background: url(images/small_wood_phone.png) no-repeat top left;
}

#contact_list #i18l_phone
{
  background: url(images/i18l_wood_phone.png) no-repeat top left;
}

#contact_list
{
    list-style: disc none inside;
}

#contact_list #phone
{
    background-image: url(images/small_wood_phone.png) no-repeat top left;
    padding-left: <image width>px;
}

#contact_list #i18l_phone
{
    background-image: url(images/i18l_wood_phone.png) no-repeat top left;
    padding-left: <image width>px;
}