Open XXKLB opened 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.
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?