Custom bullet points?

Custom CSS & Theme Design
1

I was wondering if there was any way to create custom bullet points using icons from sources like Font Awesome or Lucide? I’ve looked through the forums and attempted to use the solutions I found for styling bullet points, but none of it worked. Is this something that is possible?

2

I just found a way to create custom tasks that use icons in place of the task checkboxes (which would appear essentially the same as custom bullet points). Here’s the original post.

As an example of how to implement this, this is how you would use the Lucide folder icon at the start of a list item.

Create a CSS file with the following, replacing the f in quotations with your preferred shortcut and replacing the URL with data URL of your icon of choice:

input[data-task="f"]:checked,
li[data-task="f"] > input:checked,
li[data-task="f"] > p > input:checked {
  --checkbox-marker-color: transparent;
  border: none;
  border-radius: 0;
  background-image: none;
  background-color: currentColor;
  color: var(--checkbox-color);
  -webkit-mask-size: var(--checkbox-icon);
  -webkit-mask-position: 50% 50%;
}

input[data-task="f"]:checked,
li[data-task="f"] > input:checked,
li[data-task="f"] > p > input:checked {
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWZvbGRlciI+PHBhdGggZD0iTTIwIDIwYTIgMiAwIDAgMCAyLTJWOGEyIDIgMCAwIDAtMi0yaC03LjlhMiAyIDAgMCAxLTEuNjktLjlMOS42IDMuOUEyIDIgMCAwIDAgNy45MyAzSDRhMiAyIDAgMCAwLTIgMnYxM2EyIDIgMCAwIDAgMiAyWiIvPjwvc3ZnPg==");
  color: var(--color-yellow);
}

Then in your note, you would just type - [f] Your list item to have a folder icon appear at the start of the line.

Maybe this method will suit what you’re trying to accomplish?

Here’s how my custom tasks look:

Screenshot 2024-06-21 015714

1 Like
3

You can also use the List callouts plugin.

1 Like