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

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
           class=""
           style="display: inline;"
           data-tooltipped=""
           aria-describedby="tippy-tooltip-119"
           data-original-title="null"
           ><a
               data-ref="idea"
               class="tag">#idea</a></div>
      

  • #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

Side note — hah! no? ok sorry — the Vivaldi browser sidebar makes a great spot for Amplenote jots.

Continuing to get annoyed at Datalog for queries in Logseq, when I remembered org-roam uses a SQLite database. Plus there’s org-roam-ui, which — sheesh. It’s impressive.

I have way too much sitting in my Logseq graph to just bounce, but it’s good to remember I have options.