I tried visually replacing a few Logseq tags with icons in CSS. It worked!
How’d I do it? Inspired by Obsidian’s Alternate Checkboxes CSS snippet, I started with a tag like #idea
and looked at the element structure 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>
Set up CSS Selector based on the data-ref
attribute. For styling, I wanted to hide the text and replace it with an icon.
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. But for a quick hack, this is fine.