1

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
Stickers
  • 75,527
  • 23
  • 147
  • 186
MrNew
  • 1,384
  • 4
  • 21
  • 43

3 Answers3

3

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";
}
<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>
Stickers
  • 75,527
  • 23
  • 147
  • 186
  • Yeah that'd would work as I've tried this already but I only want to show 1 icon which will be on the first #tag – MrNew Jan 11 '16 at 15:09
  • Happy someone has a an reasonable approach, i solved this back some time too, but don't remember how .. why do these icons have to have different widths `:P`. Only flaw is, OP will need to "rebuild" the `fa` classes if he wants different icons, +1 still! – Clemens Himmer Jan 11 '16 at 15:13
  • @Tarekis thanks, and there are indeed many other ways to do it, here is another example that uses data attributes - http://stackoverflow.com/a/34602358/483779 – Stickers Jan 11 '16 at 15:15
  • @Pangloss how that one is really nice! been around with css for a while but didn't know you can refer to a attribute in css, i'm off to fiddling around a bit `:D` – Clemens Himmer Jan 11 '16 at 15:18
1

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>
    <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.

Eria
  • 2,653
  • 6
  • 29
  • 56
0

Try to add a class to every li that dont have the font awesome, like this;

<li><a class="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;
}
<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>
Zorken17
  • 1,896
  • 1
  • 10
  • 16
  • You are not allowed to just use jsfiddles, this is no good approach either, please explain your code and link the fiddle properly or i will have to flag your answer. – Clemens Himmer Jan 11 '16 at 15:06
  • 2
    @Tarekis there is a code snippet and an explenation + link to jsfiddle – Zorken17 Jan 11 '16 at 15:08
  • This works but I don't like adding another class to achieve so little. – MrNew Jan 11 '16 at 15:20
  • The power off classes is just that you can add them to do as much or as little as you want, plus that you can use the same class multiple times compared to id's. – Zorken17 Jan 11 '16 at 15:30