After creating a new icon set font, I noticed that the icons are not positioning correctly and appear smaller than expected when loaded:
https://i.stack.imgur.com/1OsAL.png
https://i.stack.imgur.com/zmLQq.png
I attempted to adjust the .icon class by adding position:relative, tweaking line-height, and adjusting font-size.
position: relative;
bottom: -4px;
However, this only seemed to align elements properly in buttons, as each element may have its own padding, line-height, etc.
Is there a solution or strategy to ensure correct positioning for all elements? Should I consider modifying the font itself instead of adjusting the CSS?
CSS
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
font-size: 1.3rem;
position: relative;
bottom: -4px;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}