Align List Items With A Single Font Awesome Icon
How can I properly align my with a single Font Awesome icon and without using nth-child as the tag will be dynamic? https://jsfiddle.net/wt7hsdgq/ What I want is basica
Solution 1:
Use pseudo element :before
for the icon.
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";
}
<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"><ul><li><ahref="#">#Jobs</a></li><li><ahref="#">#Interview</a></li></ul>
Solution 2:
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.
CSS
ul {
list-style: none;
}
li {
padding-left: 30px;
}
li.fa {
margin-left: -18px;
}
HTML
<ul><li><iclass="fa fa-tag"></i><ahref="#">#Jobs</a></li><li><ahref="#">#Interview</a></li><li><ahref="#">#AnotherOneWithoutTag</a></li><li><iclass="fa fa-tag"></i><ahref="#">#AnotherOneWithTag</a></li></ul>
Doing this, you don't have to care about the presence or not of an icon.
Solution 3:
Try to add a class to every li that dont have the font awesome, like this;
<li><aclass="noFontAwesome"href="#">#Interview</a></li>
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;
}
<linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"><ul><li><aclass="fontAwesome"href="#">#Jobs</a></li><li><ahref="#">#Interview</a></li></ul>
Post a Comment for "Align List Items With A Single Font Awesome Icon"