Custom icons as bullet points

Customization Look what I built
1

Here there is some CSS (to be placed in custom.css) to get custom icons like these as bullet points:

icon-bullets

You can define custom tags like #@folder to add other icons from the Tabler icon theme (just install TablerPicker plugin and follow the instructions in the code below):

2

this is FANTASTIC and along with hiding top level bullets has honestly simplified my approach to data management a lot. i’ve been using 5 tags/block properties to categorize everything (tags, logs, people, dates, items) and was able to establish a hierarchy for the icon assignment by just putting those in a particular order in the css for blocks that contain more than one of those block properties. this is helping me immediately visually recognize if i haven’t categorized something correctly, or if i have incomplete data, since i also hide the block properties from view.

3

Interesting, I would like to see an example. Do you change only the icon? Or maybe its color? For example I change the color of the icon for bugs if they are open/closed:

IMG_20230820_180211_201
IMG_20230820_180211_2011092Ă—551 59.9 KB

4

I haven’t experimented with changing color at all. My inclination is to not go down that road unless I run into a use case where I could really use that level of differentiation, partially just to keep visual information to a minimum and also just 'cause i’m really inexperienced at editing stylesheets lol.

here’s my daily journal “dashboard” as well as my index i’m building out currently:

image
image1428Ă—792 71.7 KB

image
image1160Ă—1350 47.7 KB

1 Like
5

Thanks for this. I’ve wanted something like this for a while.

1 Like
6

I created a plugin based on alex’s (@alex0) code to make it easier to use.

Bullet Point Custom Icon plugin

3 Likes
7

Thank you for sharing the css and examples. I have been using it and enjoying the clarity it brings and how it helps quickly tell blocks apart when scanning through the journal and pages.

I adapted it slightly to replace the bullet point for task blocks by including the default [data-refs-self*='"todo'] in the css you shared.

If I do not misunderstand this data-refs-self, one should also be able to dynamically change the color of a block’s icon by changing a value in its properties, right?. For instance, status:: open can be orange and status:: under review can be yellow, or unscheduled tasks can easily be highlighted in red. I will try this when I can spare half an hour.

8

In theory it is possible, maybe you need status:: [[open]] with brackets