[英]Align list items with a single font awesome icon
How can I properly align my <li>
with a single Font Awesome icon and without using nth-child
as the tag will be dynamic? 如何使<li>
与单个“真棒字体”图标正确对齐,而又不使用nth-child
因为标签将是动态的?
https://jsfiddle.net/wt7hsdgq/ 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
Use pseudo element :before
for the icon. 使用伪元素: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>
I'm not fond of this technique, but it is sometimes useful : you can put a bigger padding-left on all the li and a negative margin-left on the class fa . 我不喜欢这种技术,但有时它很有用:您可以在所有li上放一个较大的padding-left,在类fa上放一个负的margin-left。
CSS 的CSS
ul {
list-style: none;
}
li {
padding-left: 30px;
}
li .fa {
margin-left: -18px;
}
HTML 的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>
Doing this, you don't have to care about the presence or not of an icon. 这样做,您不必关心图标的存在与否。
Try to add a class to every li that dont have the font awesome, like this; 尝试向每个没有真棒字体的li添加一个类,就像这样;
<li><a class="noFontAwesome" href="#">#Interview</a></li>
http://jsfiddle.net/wt7hsdgq/2/ http://jsfiddle.net/wt7hsdgq/2/
Or use this snippet: 或使用以下代码段:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.