aidenlx / obsidian-icon-shortcodes

Obsidian Plugin: Insert emoji and custom icons with shortcodes
MIT License
138 stars 11 forks source link

Icons are enormous with Obsidian 0.14.4 #43

Closed I-Pch closed 2 years ago

I-Pch commented 2 years ago

I think Obsidian is breaking Icons Shortcodes 😓 ...

Just updated to the latest insider release (Obsidian 0.14.4) and now icons in a note are looking like this 😔 ... (whatever view I'm in)

Icons short
I-Pch commented 2 years ago

While waiting for this to be fixed at the source 😊 and because I really couldn't use Obsidian with icons as big as the readable length of my notes, I found a temporary solution by modifying the style.css from the plugin directly (I tried to use a snippet as suggested in the README instead but couldn't make it work 🤷‍♀️ )

So the bug seems to lie somewhere in this part of the style.css (as the --editor-font has been replaced by --font-text) :

[...]

.markdown-preview-view .isc-icon>img,
.markdown-preview-view .isc-icon>svg,
.markdown-source-view .isc-icon>img,
.markdown-source-view .isc-icon>svg {
  height: var(--editor-font-size);
  width: var(--editor-font-size)
}

[...]

By just changing the var(--editor-font-size) by var(--font-text-size) for the height and width I was able to get back workable sized icons 😊 ...

aidenlx commented 2 years ago

confirmed! before the patch is available, you can use css snippet as a temp fix, no need to modifying the style.css

I-Pch commented 2 years ago

you can use css snippet as a temp fix, no need to modifying the style.css

Yeah, I know and I tried multiple times before modifying the style.css but absolutely nothing worked 🤔 ...

I'll admit, it's been a very very very long time since I played around with css so maybe I forgot to add something 🤷‍♀️ ...

Anyway, Thank you very much for the quick fix 🥳 🙌 !!!

aidenlx commented 2 years ago

Yeah, I know and I tried multiple times before modifying the style.css but absolutely nothing worked 🤔 ...

Maybe it's because you've been using the selector with less specificity than plugin's css. In the css snippet, you should be able to override specificity with !important flag: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

I-Pch commented 2 years ago

Darn 😅 🤦‍♀️ ... I completely forgot about !important!

I'll keep a giant sticky note somewhere on my desk for when I get the time to play around with css again 😊 !

Thank you again 😁 !