There are a couple of easy methods to vertically center an icon.
With either method you’ll first target the icon or icons. If you’re using the
ss-icon class to transform a word or a Unicode value, you can select it with
.ss-icon (Protip: Without being more specific this will select all icons with the ss-icon class!). If you’re using an icon to augment a word, such as the star icon before the word “Favorites”, you’ll select the icon’s class,
ss-star, and its
:before pseudo element. So your selector would look like
Read more about using Symbolset on the web.
The set-it-and-forget-it approach is to give the selected icon(s) the property and value of
This method should give you good results and scales with the font size.
If you want control over how far the icon drops down you’ll want to select the icon and then give the it these two properties and values. The first is
position: relative; and then you’ll shift it X amount of pixels with
That’s it! Centering an icon improves typographic rhythm and helps the icon feel more harmonious with the accompanying text.
Powered by Siteleaf