[2022-08-04 Thu 10:04]

Posted
Categories
note
Tags
logseq workflow try-it-and-see

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

Logseq icons

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.