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: ```

``` less css: ``` #sitefooter ul { padding:0px; list-style-type:none; a:link { color:#FFFFFF } } ```

Accepted Answer

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.

Better way to do list styling with Glyphicons in Bootstrap less

Solution

Problem