aidenlx / obsidian-icon-shortcodes

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

How to change the emoji size How should CSS be written? #65

Open XXKLB opened 1 year ago

XXKLB commented 1 year ago

Sorry, I want to change the size of the emoji but I don't know how to write CSS😭, is there an example of how to write CSS?

notaspirit commented 1 year ago

I had the same issue, so I wrote the following .css snippet.


:root {
  --reserved-size: 1.5em;
  --content-size: 1.5em;
  --aligment: -0.4em;
}

.isc-icon.isc-img-icon {
  height: var(--reserved-size);
  width: var(--reserved-size);
  vertical-align: var(--aligment);
}

.isc-icon.isc-img-icon > img {
  width: var(--content-size);
  height: var(--content-size);
  max-width: var(--content-size);
  max-height: var(--content-size);
  vertical-align: var(--aligment);
}

.isc-icon.isc-svg-icon {
  height: var(--reserved-size);
  width: var(--reserved-size);
  vertical-align: var(--aligment);
}

.isc-icon.isc-svg-icon > svg {
  width: var(--content-size);
  height: var(--content-size);
  max-width: var(--content-size);
  max-height: var(--content-size);
  vertical-align: var(--aligment);
}

The 'reserved-size' variable is for how much space the icon object will take up in the text, while the 'content-size' variable is for how much space the image will take up. Currently this snippet is set to change the icon size to 1.5 times the line size, this way it will scale with the text size. To change the size of the icons simply play around with the variables at the very top. This snippet only affects the icons in the normal text, not in the headers. To visually perfectly center the icon you need play around with the 'alignment' variable, as setting it to 'middle' always looks a bit off center.