Better way to do list styling with Glyphicons in Bootstrap less

Question

Is there a way to achieve this same outcome purely in less? Is there way to do that in less, with less html code? Way to style that glyphicon to be as li icon in css/less?

html:

<div id="sitefooter">
    <ul>
     <li><a href="/pal_apllaa.asp"><i class="glyphicon glyphicon-chevron-right"> </i>pla pal apllaa?</a>
    </li>
    <li><a href="/pal_apllaa.asp"><i class="glyphicon glyphicon-chevron-right"> </i>pal apllaa?</a>
    </li>
    <li><a href="/pal_apllaa.asp"><i class="glyphicon glyphicon-chevron-right"> </i>pal apllaa?</a>
    </li>
    </ul>
</div>

less css:

#sitefooter ul {
     padding:0px;
     list-style-type:none;

         a:link {
             color:#FFFFFF
         }
     }

Solution

Sure. You can copy the styles for the icons and add them to your custom css like this:

#sitefooter ul {
    list-style: none;
    padding: 0;
}
#sitefooter li:before {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 0 10px;
    content: "\e080";
}

Now, any time you add list item in the site footer, it will automatically be styled with the chevron-right icon. The content: "\e080" specifies the character, so if you want to change it to a different one, I find it easiest to just look at the glyphicons.less file and search for the name of the icon there to find it's corresponding character number.