在带有 fontawesome 的嵌套 UL 中使用不同的列表图标

Question

我想在顶部列表中使用 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/

任何帮助将不胜感激，

提前致谢。

Answer 1

将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;  }

如果对你有帮助，请标记我的回答

Answer 2

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 的嵌套 UL 中使用不同的列表图标

Using different list icons inside nested UL with fontawesome

html

css

html-lists

font-awesome