View Issue Details
|ID||Project||Category||View Status||Date Submitted||Last Update|
|0021691||mantisbt||ui||public||2016-09-13 07:46||2017-02-28 05:43|
|Summary||0021691: Modern UI: Use SVG rather than icon fonts|
I have recently been checking out the work on Mantis 2.0 (which looks pretty good!). While I was pleasantly surprised by many changes, this has also raised some concerns. I realize it may be too late in development to revise this decision, but I still wanted to bring it up, if only to be addressed at a later stage.
My concern are the icon fonts. There are many articles out there which already address issues with these (e.g. https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/ https://www.sitepoint.com/icon-fonts-vs-svg-debate/ and https://www.sitepoint.com/final-nail-icon-fonts-coffin/) but I am going to quickly summarize the most important points:
Since Mantis 2.0 is not officially released yet, I hope you can still make the transition to SVG icons and not use an already outdated technique by the time the software reaches its first stable version.
This article may help with the transition to SVG: https://sarasoueidan.com/blog/icon-fonts-to-svg/
As I can see, this was sadly not considered for the 2.0.0 release. Would it be possible to address this in a future 2.0.x or 2.x update?
Can you provide a screen shot where one of the MantisBT icons looks very awkward?
That part of the comment was more a generic disadvantage of font icons - the Mantis icons look mostly okay here (with a few odd pixels here and there on Firefox).
The first mis-rendered become obvious now. The attached screenshot is taken with Firefox on Windows 7 at normal DPI settings.
I was not able to reproduce it using FF 51.0.1 on Windows 7, Windows 10 and macOS 10.12.3.
I don't see anyone insisting on anything.
I think it depends on many things, including the moon phase. :) No, more seriously speaking, it probably depends on the exact x/y position where the box is rendered on-screen, and maybe even graphics drivers. I took the screenshot above with Intel integrated graphics, but on AMD graphics I get a slightly rounded edge at the top (but still less rounded than the bottom). This does not happen with SVG icons. So it really would be preferrable to switch from font to SVG icons in a future release.
While I fully agree with your advice on principle, to be frank I don't see this happening any time soon; MantisBT 2 relies heavily on a bootstrap template named Ace, and I'm afraid that with our limited resources we won't have the bandwidth to implement such a change in the near future.
@syncguru maybe you care to comment.
We could at least think about distinguishing between using fonts for icons and using fonts for rounded squares.
I'm not familiar with Bootstrap so I don't know how complicated it would be to e.g. exchange the icons in the main menu, but e.g. replacing the colored squares, priority and attachment icons in the bug tables should be relatively trivial, because all that needs to be done is replacing a styled HTML element with an image element. Of course it's a bit of work, but Bootstrap shouldn't get into the way there. It's only a partial solution but probably still better than nothing, and it will look better on various clients, too.
|2016-09-13 07:46||j_schultz||New Issue|
|2016-09-13 08:35||atrol||Tag Attached: modern-ui|
|2017-01-01 12:44||j_schultz||Note Added: 0054885|
|2017-01-01 13:16||atrol||Status||new => feedback|
|2017-01-01 13:16||atrol||Note Added: 0054886|
|2017-01-01 13:31||j_schultz||Note Added: 0054887|
|2017-01-01 13:31||j_schultz||Status||feedback => new|
|2017-02-27 07:10||j_schultz||File Added: font-icon.png|
|2017-02-27 07:10||j_schultz||Note Added: 0055787|
|2017-02-27 15:50||atrol||Note Added: 0055808|
|2017-02-27 15:59||j_schultz||Note Added: 0055809|
|2017-02-28 03:15||dregad||Note Added: 0055814|
|2017-02-28 03:31||atrol||Note Added: 0055815|
|2017-02-28 05:43||j_schultz||Note Added: 0055818|