在带有 fontawesome 的嵌套 UL 中使用不同的列表图标
Using different list icons inside nested UL with fontawesome
我想在顶部列表中使用 fontawesome 中的双人字形,然后在第 2 层我想使用 html 提供的普通要点。
这是我的代码;
<div class="list">
<h4>SOLUTIONS</h4>
<ul>
<li>Communications Strategy</li>
<ul>
<li>Forecasting and benchmarking</li>
<li>Editorial charter</li>
</ul>
<li>Integrated Editorial Piloting</li>
<ul>
<li>Project management support</li>
</ul>
</ul>
</div>
CSS
.list li {
padding: 0 0 2px 0;
margin: 0;
list-style: none;
color:white;
font-size:0.6875em;
}
.list li:before {
content: '\f101';
font-family:'FontAwesome';
float: left;
padding-left: 1em;
margin-right: 0.2em;
color: #e31b5a; }
目前它将所有列表项更改为相同的字体图标,我找不到使它看起来更像这样的方法;
http://imageshack.com/a/img921/9828/d4tbEx.png
这是一个fiddle;
https://jsfiddle.net/1v3e3c3g/
任何帮助将不胜感激,
提前致谢。
将class添加到要添加双人字形的li元素,然后为其编写css
<div class="list">
<h4>SOLUTIONS</h4>
<ul>
<li class="style">Communications Strategy</li>
<ul>
<li>Forecasting and benchmarking</li>
<li>Editorial charter</li>
</ul>
<li class="style">Integrated Editorial Piloting</li>
<ul>
<li>Project management support</li>
</ul>
</ul>
</div>
这里是 css
.list li.style {
padding: 0 0 2px 0;
margin: 0;
list-style: none;
color:white;
font-size:0.6875em;
}
.list li {
padding: 0 0 2px 0;
margin: 0;
color:white;
font-size:0.6875em;
}
.list li:before {
content: '\f101';
font-family:'FontAwesome';
float: left;
padding-left: 1em;
margin-right: 0.2em;
color: #e31b5a; }
如果对你有帮助,请标记我的回答
https://jsfiddle.net/1v3e3c3g/1/
.list li {
padding: 0 0 2px 0;
margin: 0;
color: black;
font-size: 0.6875em;
}
.list > ul {margin-left: 1em;}
.list > ul > li {list-style: none;}
.list > ul > li:before {
content: '\f101';
font-family: 'FontAwesome';
display: inline;
margin-right: 0.2em;
color: #e31b5a;
}
.list > ul > ul {
margin-left: 2em;
list-style: initial;
}
我拆分了您的代码,使其更具语义和逻辑性(例如 ul 上的边距,而不是 li)。
我想在顶部列表中使用 fontawesome 中的双人字形,然后在第 2 层我想使用 html 提供的普通要点。
这是我的代码;
<div class="list">
<h4>SOLUTIONS</h4>
<ul>
<li>Communications Strategy</li>
<ul>
<li>Forecasting and benchmarking</li>
<li>Editorial charter</li>
</ul>
<li>Integrated Editorial Piloting</li>
<ul>
<li>Project management support</li>
</ul>
</ul>
</div>
CSS
.list li {
padding: 0 0 2px 0;
margin: 0;
list-style: none;
color:white;
font-size:0.6875em;
}
.list li:before {
content: '\f101';
font-family:'FontAwesome';
float: left;
padding-left: 1em;
margin-right: 0.2em;
color: #e31b5a; }
目前它将所有列表项更改为相同的字体图标,我找不到使它看起来更像这样的方法;
http://imageshack.com/a/img921/9828/d4tbEx.png
这是一个fiddle;
https://jsfiddle.net/1v3e3c3g/
任何帮助将不胜感激,
提前致谢。
将class添加到要添加双人字形的li元素,然后为其编写css
<div class="list">
<h4>SOLUTIONS</h4>
<ul>
<li class="style">Communications Strategy</li>
<ul>
<li>Forecasting and benchmarking</li>
<li>Editorial charter</li>
</ul>
<li class="style">Integrated Editorial Piloting</li>
<ul>
<li>Project management support</li>
</ul>
</ul>
</div>
这里是 css
.list li.style {
padding: 0 0 2px 0;
margin: 0;
list-style: none;
color:white;
font-size:0.6875em;
}
.list li {
padding: 0 0 2px 0;
margin: 0;
color:white;
font-size:0.6875em;
}
.list li:before {
content: '\f101';
font-family:'FontAwesome';
float: left;
padding-left: 1em;
margin-right: 0.2em;
color: #e31b5a; }
如果对你有帮助,请标记我的回答
https://jsfiddle.net/1v3e3c3g/1/
.list li {
padding: 0 0 2px 0;
margin: 0;
color: black;
font-size: 0.6875em;
}
.list > ul {margin-left: 1em;}
.list > ul > li {list-style: none;}
.list > ul > li:before {
content: '\f101';
font-family: 'FontAwesome';
display: inline;
margin-right: 0.2em;
color: #e31b5a;
}
.list > ul > ul {
margin-left: 2em;
list-style: initial;
}
我拆分了您的代码,使其更具语义和逻辑性(例如 ul 上的边距,而不是 li)。