将列表项与单个字体超赞图标对齐 [英] Align list items with a single font awesome icon

问题描述

我如何正确地将<li>与单个Font Awesome图标对齐，而又不使用nth-child，因为标签将是动态的?

How can I properly align my <li> with a single Font Awesome icon and without using nth-child as the tag will be dynamic?

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>

我想要的基本上是这样的:

What I want is basically something like this:

[fa] #Jobs
     #Interview

推荐答案

对图标使用伪元素: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>

这篇关于将列表项与单个字体超赞图标对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！