I tried visually replacing a few Logseq tags with icons in CSS. It worked!

#+attr_html :alt logseq page /img/2022-08-04-logseq-icons.png

Three down, a few thousand to go

How'd I do it? Here I'll just paste from my journal note figuring out the first one. I'm sure I'll revisit this tonight after taking care of the day's business.

  • #idea Thinking about custom tag icons for logseq

    • #warning under construction #warning
    • Inspired by Obsidian Alternate Checkboxes CSS snippet
    • Here's what #idea looks like in the dev console:

      •  <div
              style="display: inline;"
    • #question how do my installed plugins change the structure?

      • I don't think I currently have any plugins that alter element attributes
    • Set up CSS Selector #bookmark to match

      • a.tag[data-ref"idea"]=
    • Hide the displayed tag by making it tiny

      •  a.tag[data-ref="idea"] {
           border: none;
           font-size: 0;
    • Append an icon with the font size we started at

      •  a.tag[data-ref="idea"]:after {
           content: "💡";
           font-size: initial;
    • as-is, this has accessibility issues and font-size: initial won't work with headings. Also, to do it right I should be encoding the icon