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?
::marker
psudeo-element is not supported. It is now supported across several browsers
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 */ }
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.
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
<ul class="fa-ul"><li class="h4"><font-awesome-icon icon="check" /> ...
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:
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
<li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>
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.
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:
<style>
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: " ";
margin-left: -1.3em;
margin-right: 15px;
padding: 10px;
background-color: orange;
-webkit-mask-image: url("./assets/img/check-circle-solid.svg");
-webkit-mask-size: cover;
}
</style>
Results
https://i.stack.imgur.com/P3Q9w.png
png
instead of svg
? thank you
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;
}
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.
@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; }
This is the first paragraph in this document.
This is a very short document.
This is the end.
This is my version: FontAwesome 5 ul
ul { list-style-position: inside; padding-left: 0; } ul li { list-style: none; position: relative; padding-left: 20px; } ul li::before { position: absolute; top: calc(50% - 4px); /* half font-size */ left: 0px; font-family: "Font Awesome 5 Free"; content: "\f111"; font-size: 8px; font-weight: 900; }
See reference : https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/icons-in-a-list
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
<li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>
Success story sharing
font-weight: 900;