將列表項與單個字體超贊圖標對齊

Question

如何使<li>與單個“真棒字體”圖標正確對齊，而又不使用nth-child因為標簽將是動態的？

https://jsfiddle.net/wt7hsdgq/

 ul { list-style: none; } li { padding-left: 5px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <ul> <li><i class="fa fa-tag"></i> <a href="#">#Jobs</a></li> <li><a href="#">#Interview</a></li> </ul> 

我想要的基本上是這樣的：

[fa] #Jobs
     #Interview

Answer 1

使用偽元素:before作為圖標。

 ul { list-style: none; } li { padding-left: 5px; } li:before { content: ""; display: inline-block; width: 20px; } li:first-child:before { font-family: "FontAwesome"; content: "\\f02b"; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <ul> <li><a href="#">#Jobs</a></li> <li><a href="#">#Interview</a></li> </ul> 

Answer 2

我不喜歡這種技術，但有時它很有用：您可以在所有li上放一個較大的padding-left，在類fa上放一個負的margin-left。

的CSS

ul {
  list-style: none;
}
li {
  padding-left: 30px;
}
li .fa {
  margin-left: -18px;
}

的HTML

<ul>
  <li>
    <i class="fa fa-tag"></i>
    <a href="#">#Jobs</a>
  </li>
  <li>
    <a href="#">#Interview</a>
  </li>
  <li>
    <a href="#">#AnotherOneWithoutTag</a>
  </li>
  <li>
    <i class="fa fa-tag"></i>
    <a href="#">#AnotherOneWithTag</a>
  </li>
</ul>

這樣做，您不必關心圖標的存在與否。

Answer 3

嘗試向每個沒有真棒字體的li添加一個類，就像這樣；

<li><a class="noFontAwesome" href="#">#Interview</a></li>

http://jsfiddle.net/wt7hsdgq/2/

或使用以下代碼段：

 ul { list-style: none; } li { padding-left: 5px; } li .fontAwesome:before { font-family: "FontAwesome"; content: "\\f02b"; margin-right: 5px; margin-left: -1.3em; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <ul> <li><a class="fontAwesome" href="#">#Jobs</a></li> <li><a href="#">#Interview</a></li> </ul>