Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Custom li list-style with font-awesome icon

I am wondering if it's possible to utilize font-awesome (or any other iconic font) classes to create a custom <li> list-style-type?

I am currently using jQuery to do this, ie:

$("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>");

However, this doesn't style properly when the <li> text wraps across the page as it considers the icon to be part of the text, not the actual bullet-indicator.

Any tips?

like image 200
Darrrrrren Avatar asked Sep 28 '22 23:09

Darrrrrren


People also ask

How do I add an icon to a list item?

To insert an icon, add the name of the icon class to any inline HTML element. The <i> and <span> elements are widely used to add icons. All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)

How do I use Font Awesome icon in pseudo element?

Enable Pseudo-elements Using CSS Pseudo-elements to render icons is disabled by default when using our SVG + JS Framework. You'll need to add the <script data-search-pseudo-elements ... > attribute to the <script> element that calls Font Awesome.


2 Answers

The CSS Lists and Counters Module Level 3 introduces the ::marker pseudo-element. From what I've understood it would allow such a thing. Unfortunately, no browser seems to support it.

What you can do is add some padding to the parent ul and pull the icon into that padding:

ul {
  list-style: none;
  padding: 0;
}
li {
  padding-left: 1.3em;
}
li:before {
  content: "\f00c"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

Adjust the padding/font-size/etc to your liking, and that's it.

You could and should also put the spacing unit in a css variable instead of repeating it throughout the code.

=====

This works with any type of iconic font. FontAwesome, however, provides their own way to deal with this 'problem'. Check out Darrrrrren's answer below for more details.

like image 374
João Paulo Macedo Avatar answered Oct 09 '22 16:10

João Paulo Macedo


As per the Font Awesome Documentation:

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check"></i>Barbabella</li>
  <li><i class="fa-li fa fa-check"></i>Barbaletta</li>
  <li><i class="fa-li fa fa-check"></i>Barbalala</li>
</ul>

Or, using Jade:

ul.fa-ul
  li
    i.fa-li.fa.fa-check
    | Barbabella
  li
    i.fa-li.fa.fa-check
    | Barbaletta
  li
    i.fa-li.fa.fa-check
    | Barbalala
like image 77
cutemachine Avatar answered Oct 09 '22 17:10

cutemachine