search

FortAwesome / Font-Awesome

The iconic SVG, font, and CSS toolkit
https://fontawesome.com
Other
73.5k stars 12.2k forks source link

Off center bug in FontAwesomeIcons.trophy #16222

Open Mullen89 opened 4 years ago

Mullen89 commented 4 years ago

This icon is not centered when used in mobile app development (using DART with the Flutter framework). Looks to be about 10 - 15 pixels too far to the right.

tagliala commented 4 years ago

Hi!

Thanks for being part of the Font Awesome Community.

Could you please provide a reproducible test case and fill out our bug report template?

DustyLamp commented 3 years ago

I've got the same issue - it's causing alignment problems in my flutter app.

A simple way to view the issue is to just display it in a Container with the same size as the icon:

Container(
  color: Colors.red,
  width: 60,
  child: Icon(
    FontAwesomeIcons.trophy,
    color: ColorPicker.white,
    size: 60,
  ),
),

You can see that it clearly overflows past the size it's been given on the right and the bottom:

image

DustyLamp commented 3 years ago

On further inspection, it looks like the width is set to 576 and the height is set to 512.

I'd imagine the width should be set to 512 and the trophy's height should be scaled down and be vertically centered in 512 height.

tagliala commented 3 years ago

I'd imagine the width should be set to 512 and the trophy's height should be scaled down and be vertically centered in 512 height.

Hi, Font Awesome icons have different width by design decision. Please do not assume that all icons fill in a square container

Before escalating this issue, could you please post screenshots of the same example for:

DustyLamp commented 3 years ago

Noted.

Sure thing. Looks like it's the same issue. square-full: image

gamepad: image

tagliala commented 3 years ago

Ok, thanks

Is flutter using the webfont version of Font Awesome?

DustyLamp commented 3 years ago

It's using the pubdev font awesome flutter package

FYI: Those screenshots were taken using version 8.8.1, but the current version 8.11.0 is experiencing the same issue.

image

DustyLamp commented 3 years ago

Ok, silly me - After reading through the package it looks like there is a solution:

User the FaIcon Widget instead of Icon.

Sounds like this could be resolved already

tagliala commented 3 years ago

It's using the pubdev font awesome flutter package

Sorry, we do not provide support for third parties

Apparently this library uses the webfont. The misaligned height may be an issue with the Descender, but this is the nature itself of webfonts, so we can't fix it

User the FaIcon Widget instead of Icon.

If you can confirm it solves the issue, please let us know

DustyLamp commented 3 years ago

Understood.

It solves the alignment issue, however. it seems that giving the icon a size will still cause the icon to overflow as if the icon is taking up more size than it was told to.

As you said - could be an issue with Descender