Question

我想在fontawesome中使用双V形图作为顶部列表，然后在第二级我想使用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;  }

目前它将所有列表项更改为相同的fontawesome图标，我找不到让它看起来更像这样的方法;

http://imageshack.com/a/img921/9828/d4tbEx.png

这是一个小提琴;

https://jsfiddle.net/1v3e3c3g/

非常感谢任何帮助，

提前致谢。

Answer 1

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）。

Answer 2

将类添加到要添加双V形符号然后为其编写css的li元素

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

如果它对您有所帮助，请标记我的答案

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

2 个答案: