Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: back button icon rendering inconsistently #2306

Merged
merged 1 commit into from
Dec 10, 2022

Conversation

NickColley
Copy link
Collaborator

@NickColley NickColley commented Dec 6, 2022

Depending on the operating system and therefore the system font the back icon being a unicode arrow means it'll render inconsistently, sometimes I've seen it looking really odd.

Instead make use of the font awesome arrow so that'll it render consistently no matter the system font.

Before After
Slender back arrow before button label Thicker font awesome back arrow before button label

Depending on the operating system and therefore the system font
the back icon being a unicode arrow means it'll render inconsistently,
sometimes I've seen it looking really odd.

Instead make use of the font awesome arrow so that'll it render consistently
no matter ths system font.
display: inline-flex;
align-items: center;
justify-self: flex-end;
font-size: 1.2857142857142858em;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was this font-size generated by a tool or something? Same question about the 0.6666666 below. 🙂

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To get the alignment on a pixel grid I chose to calculate this so it rounds to the nearest pixel.

Copy link
Owner

@nolanlawson nolanlawson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great to me! Thanks.

@NickColley NickColley merged commit 3fb152a into master Dec 10, 2022
@NickColley NickColley deleted the improve-back-button-icon branch December 10, 2022 23:30
alice-werefox pushed a commit to alice-werefox/sema-werefox-cafe that referenced this pull request Apr 3, 2023
Depending on the operating system and therefore the system font
the back icon being a unicode arrow means it'll render inconsistently,
sometimes I've seen it looking really odd.

Instead make use of the font awesome arrow so that'll it render consistently
no matter ths system font.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants