Discuss requests for comments/changes posted in the Issue Tracker for the development of phpBB's style.

Forum rulesPlease do not post support questions regarding installing, updating, or upgrading phpBB or modifying styles of released phpBB versions. If you need support for phpBB please visit the Support Forums on phpbb.com.

If you have questions regarding creating styles please post in Styles Support & Discussion to receive proper guidance from our staff and community.

its an issue with svgs as well as it depends on weather they are designed to the center of the viewbox vs the bottom of the viewbox ... fa is designed at the bottom vs mdi which is designed to the center.

When using FA it happens very often that icon needs custom alignment. Same will be with SVG. That is why framework doesn't assume anything and shows icons as is... with exception of colors and width/height values. It is a minor issue of old icons that are designed to be handled as fonts.

But these fonts are moving forward too. FontAwesome 4 is designed to be used as font, FontAwesome 5 is done properly as collection of SVG without extra spacing below icon for text alignment.

- Images imported from fonts are now cropped by up to same amount that is displayed below baseline, so images no longer have extra spacing. Images that go below baseline will not have part of them cut out.

- Component for searching icons is available: https://simplesvg.com/test/search.html
It is still in testing, but it seems to work fine. There are 2 samples on that page: one that searches all collections, one restricted to Emoji One collection. Component is flexible and customizable. It can be used to allow users to insert custom icons, such as custom forum icons or (as shown in sample) emoji selection.

- When dimensions aren't specified or height is set to 1em, icons imported from fonts are adjusted to inline mode. Vertical-align is set to baseline setting from font, so glyph goes slightly below baseline, just like if it was rendered as font.

Test it on this very forum. Write these 2 lines of code in browser console:

Or remove alignment completely. Issue with that icon is its below middle of text, so centering it vertically requires some hack, for both font and svg. Instead of messing with alignment you can move it. This solution should work for both <i> and <svg>