The default bullet lists style works fine for most use cases, but when you want to display what's included and what is not included you want checkmarks and crosses.

Checkmark and Cross Classes

  • class = list-checkmarks
  • class = list-cross
  • class = cross

Here is what using 'list-checkmarks' class will look like.

  • Three Books
  • Unlimited collaborators
  • Book discovery
<div>
<ul class="list-display list-checkmarks">
	<li>Three Books</li>
	<li>Unlimited collaborators</li>
	<li>Book discovery</li>
</ul>
</div>

Checkmark and Cross combo

  • Three Books
  • Unlimited collaborators
  • Book discovery

Notice the 'cross' class for the last line to show the X while still using the 'list-checkmarks' for everything else.

<div>
    <ul class="list-display list-checkmarks">
	<li>Three Books</li>
	<li>Unlimited collaborators</li>
        <li class="cross">Book discovery</li>
</ul>
</div>

Here is what using 'list-cross' class will look like.

  • Three Books
  • Unlimited collaborators
  • Book discovery

Now, if you only wanted to list all items as cross, you can use the "list-cross" class as shown below.

<div>
<ul class="list-display list-cross">
	<li>Three Books</li>
	<li>Unlimited collaborators</li>
	<li>Book discovery</li>
</ul>
</div>

Reference:
Use this cheat sheet for Fontawesome icons.
https://www.fontawesomecheatsheet.com/

6 / 6

List Styles - Checkmark & Cross

No comments