listStyleImage.aspx font size:
View Sample
<html>
<head>
<title>Abakada CSS Sample: Dynamically Changing CSS List Style Images</title>
<link rel="stylesheet" href="/shared/netdemos.css">

<style type="text/css">
<!--
   .div { width:50%;  background: beige; border: 2px inset }
   #list { font: bold 13pt arial; text-align: left; cursor: hand }
-->
</style>
</head>

<body>
<!-- #include virtual="~/shared/top.inc" -->

<div class="header"><h2>Abakada CSS Sample: Dynamically Changing CSS <span class="hilite">List Style Images</span></h2></div>
<hr size=1 width=92%>

<center>

<p id=msg>This example uses inline event handlers to dynamically set a list object's image.</p>

<p>Move the <b>mouse over</b> the list to change the default list item markers to an image.<br>
   <b>Click</b> on the list to use another image. <b>Double-click</b> to use another image.<br>
   Move the <b>mouse out</b> to reset.</p>

<div class=div align="center">
<ul id="list" 
   onmouseover="this.style.listStyleImage='url( /shared/wink.gif )'"
   onclick="this.style.listStyleImage='url( /shared/biggrin.gif )'"
   ondblclick="this.style.listStyleImage='url( /shared/razz.gif )'"
   onmouseout="this.style.listStyleImage='none'">
   <li>item one
   <li>item two
   <li>item three
   <li>item four
</ul></div>

<p class="note">NOTE: Whilst <b>list-style-image</b> can be any size, image size should not exceed 32 square pixels to maintain list proportion. </p>

</center>

<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->

</body>
</html>