问题描述:

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

}

}

网友答案:

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.

网友答案:

This is some debate on whether to use the i tag for icons. I would personally avoid it and use a span tag instead. This is what I typically use for something like that;

<a href="http://yourlink.com" class="list-group-item active"><span class="glyphicon glyphicon-envelope"></span>Message</a>

But I think what you are asking is how you target that specific piece of code. You can add an additional class in your span or i tag such as:

//HTML
<span class="custom_glyphicon"></span>

//CSS
.custom_glyphicon{background-color:#ffffff;}

Or you can write you css to target specifically the glyphicon

//CSS
#sitefooter ul li .glyphicon {
 padding:0px;
 list-style-type:none;
 a:link {
 color:#FFFFFF
 }
相关阅读:
Top