CSS應用 - 利用CSS自定項目圖示

.custom-image li
{
    background-image:url(apple.png);
    background-position:left 2px;
    background-repeat:no-repeat;    
    list-style-type:none;
    padding-left:20px;
}

<div>利用CSS自定項目圖示</div>
<ul class='custom-image'>
    <li>利用CSS的background-image:url(圖片網址)的方式以背景圖方式顯示</li>
    <li>利用CSS的background-position:left 2px，以水平置左方、
        垂直由上往下偏移2px的方式顯示， 以保證多行時，圖示位置仍正常顯示</li>
    <li>利用CSS的background-repeat:no-repeat，
        保持背景圖片只顯示一次(預設會重複顯示填滿整個背景)</li>
    <li>利用CSS的list-style-type:none，關閉原本li的圖示</li>
    <li>利用CSS的padding-left:20px;，在項目左邊擠出圖片所需的寬度，
        避免被文字蓋到，擠出的寬度建議為圖片寬度+4，讓文字與圖片保持適當空白</li>
</ul>