Hi, small but annoying problem, I use to add local 16px x 16px svg icons to my notes as markdown links. I would like their bottom to be aligned with the bottom of the text line but instead they float higher. What does this depend on? Thanks
This sounds like something that could be corrected by a CSS snippet, but I don’t know enough about it to help in detail. These links may help you work it out.
- CSS snippets.
- Obsidian CSS Quick Guide (forum) shows how to explore the parts of Obsidian to find what exactly to target with the snippet.
You might also search the forum to see if this has come up before and someone has provided a solution.
Some code showing what you want to align could also be beneficial for others wanting to help. It’s much easier to copy your code and start fiddling, than guessing what you’re doing.
I will explain everything properly, sorry
I got this icon
https://lucide.dev/icons/square-play
And I customized it to be:
- color: #ff0000
- stroke width: 1.5px
- size: 16px
- absolute stroke width: on
I saved it as “icon-video.svg” and put it in the obsidian templates folder.
I created an obsidian template with:
![[Technology/Software/Markdown/Icons/icon-video.svg]]
From now on, when I need it, I add this icon to my notes by calling up this template.
As I say though, its height is not aligned to the height of the text line. It would be better if aligned to the base of the text, even better aligned to half the height of the text.
Now the situation looks like this:
I was wondering if using some css trick, which I don’t know, it could become like this
Have you tried the plugin Iconize? It supports Lucide icons. You can add icons to notes and you can change icon colors.
Thank you but I would prefer to use a solution that is independent of the markdown application used. I only use obsidian plugins that simplify some operations, I want the appearance of a note to remain the same outside of Obsidian
HTML should be the most compatible option:
This is *text* in **Markdown**. This is an <img src="square-play.svg"> SVG icon test.
You could add CSS for positioning.
A bit lengthy, but self-contained and compatible:
This line contains an <span style="vertical-align: -.1em;"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="#f00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-play"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="m9 8 6 4-6 4Z"/></svg></span> icon.
Renders like this:
Thanks harr the last proposal is the best for me. The one with html has a defect, the svg file path would only work on windows or android but not in both systems at the same time.
And I want my notes to behave the same way on both smartphone and pc.
Anyway thank you very much, problem solved!
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.