Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
XXKLB opened this issue Feb 4, 2023 · 1 comment
Open

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

XXKLB opened this issue Feb 4, 2023 · 1 comment

Comments

@XXKLB
Copy link

XXKLB commented Feb 4, 2023

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
Copy link

notaspirit commented Apr 1, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants