Custom li list-style with font-awesome icon

Question

I am wondering if it s possible to utilize font-awesome  or any other iconic font  classes to create a custom  lt li gt  list-style-type   I am currently using jQuery to do this  ie      li myClass   prepend   lt i class   icon-chevron-right   gt  lt  i gt       However  this doesn t style properly when the  lt li gt  text wraps across the page as it considers the icon to be part of the text  not the actual bullet-indicator   Any tips

User · Answer

I d like to provide an alternate  easier solution that is specific to FontAwesome   If you re using a different iconic font  JOPLOmacedo s answer is still perfectly fine for use   FontAwesome now handles list styles internally with CSS classes   Here s the official example    lt ul class  fa-ul  gt     lt li gt  lt span class  fa-li  gt  lt i class  fas fa-check-square  gt  lt  i gt  lt  span gt List icons can lt  li gt     lt li gt  lt span class  fa-li  gt  lt i class  fas fa-check-square  gt  lt  i gt  lt  span gt be used to lt  li gt     lt li gt  lt span class  fa-li  gt  lt i class  fas fa-spinner fa-pulse  gt  lt  i gt  lt  span gt replace bullets lt  li gt     lt li gt  lt span class  fa-li  gt  lt i class  far fa-square  gt  lt  i gt  lt  span gt in lists lt  li gt   lt  ul gt

User · Answer

I wanted to add to JOPLOmacedo s answer  His solution is my favourite  but I always had problem with indentation when the li had more than one line  It was fiddly to find the correct indentation with margins etc  But this might concern only me   For me absolute positioning of the  before pseudo-element works best  I set padding-left on ul  negative position left on the  before element  same as ul s padding-left  To get the distance of the content from the  before element right I just set the padding-left on the li  Of course the li has to have position relative  For example  ul     margin  0 0 1em 0    padding  0 0 0 1em       make space for li s  before      list-style  none     li     position  relative    padding-left  0 4em       text distance to icon       li before     font-family   my-icon-font     content   character-code-here     position  absolute    left  -1em       same as ul padding-left      top  0 65em       depends on character  maybe use padding-top instead               more styling  maybe set width etc            Hopefully this is clear and has some value for someone else than me

User · Answer

I did it like this   li     list-style  none    background-image  url    assets img control svg      background-repeat  no-repeat    background-position  left center      Or you can try this if you want to change the color   li  before     content        display  inline-block    height  10px    width  10px    margin-right  7px     background-color  orange    -webkit-mask-image  url    assets img control svg      -webkit-mask-size  cover

User · Answer

Now that the   marker element is available in evergreen browsers  this is how you could use it  including using  hover to change the marker  As you can see  now you can use any Unicode character you want as a list item marker and even use custom counters   x000D   x000D   charset  UTF-8    counter-style fancy     system  fixed    symbols        suffix          p     margin-left  8em     p note     display  list-item    counter-increment  note-counter     p note  marker     content   Note   counter note-counter          ol     margin-left  8em    padding-left  0     ol li     list-style-type  lower-roman     ol li  marker     color  blue    font-weight  bold     ul     margin-left  8em    padding-left  0     ul happy li  marker     content         ul happy li hover     color  blue     ul happy li hover  marker     content         ul fancy     list-style  fancy    x000D   lt p gt This is the first paragraph in this document  lt  p gt   lt p class  note  gt This is a very short document  lt  p gt   lt ol gt     lt li gt This is the first item       lt li gt This is the second item         lt li gt This is the third item   lt  ol gt   lt p gt This is the end  lt  p gt    lt ul class  happy  gt     lt li gt Item 1 lt  li gt     lt li gt Item 2 lt  li gt     lt li gt Item 3 lt  li gt   lt  ul gt    lt ul class  fancy  gt     lt li gt Item 1 lt  li gt     lt li gt Item 2 lt  li gt     lt li gt Item 3 lt  li gt   lt  ul gt  x000D   x000D   x000D

User · Answer

As per the Font Awesome Documentation   lt ul class  quot fa-ul quot  gt     lt li gt  lt i class  quot fa-li fa fa-check quot  gt  lt  i gt Barbabella lt  li gt     lt li gt  lt i class  quot fa-li fa fa-check quot  gt  lt  i gt Barbaletta lt  li gt     lt li gt  lt i class  quot fa-li fa fa-check quot  gt  lt  i gt Barbalala lt  li gt   lt  ul gt   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

User · Answer

I did two things inspired by  OscarJovanny comment  with some hacks  Step 1   Download icons file as svg from Here  as I only need only this icon from font awesome  Step 2   lt style gt  ul       list-style-type  none      margin-left  10px     ul li       margin-bottom  12px      margin-left  -10px      display  flex      align-items  center     ul li  before       color  transparent      font-size  1px      content   quot   quot       margin-left  -1 3em      margin-right  15px      padding  10px      background-color  orange      -webkit-mask-image  url  quot   assets img check-circle-solid svg quot        -webkit-mask-size  cover     lt  style gt   Results

User · Answer

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    x000D   x000D  ul   x000D    list-style  none  x000D    padding  0  x000D    x000D  li   x000D    padding-left  1 3em  x000D    x000D  li before   x000D    content    f00c      FontAwesome Unicode    x000D    font-family  FontAwesome  x000D    display  inline-block  x000D    margin-left  -1 3em     same as padding-left set on li    x000D    width  1 3em     same as padding-left set on li    x000D    x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com font-awesome 4 5 0 css font-awesome min css  gt  x000D   lt ul gt  x000D     lt li gt Item one lt  li gt  x000D     lt li gt Item two lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Adjust the padding font-size etc to your liking  and that s it  Here s the usual fiddle  http   jsfiddle net joplomacedo a8GxZ          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

[css] Custom li list-style with font-awesome icon

Examples related to css

Examples related to html-lists

Examples related to font-awesome