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?
This question is related to
css
html-lists
font-awesome
I did two things inspired by @OscarJovanny comment, with some hacks.
Step 1:
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
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;
}
_x000D_
<p>This is the first paragraph in this document.</p>
<p class="note">This is a very short document.</p>
<ol>
<li>This is the first item.
<li>This is the second item.
<li>This is the third item.
</ol>
<p>This is the end.</p>
<ul class="happy">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul class="fancy">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
_x000D_
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.
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
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;
}
Source: Stackoverflow.com