Refresh the user interface icons, add card brand logos #2326
Conversation
Changaco
commented
Mar 19, 2024
Changaco
commented
- Drop icon fonts (Glyphicons and Forkawesome). Add SVGs from Bootstrap Icons as replacements. (See Inline SVG vs Icon Fonts and Stop Using Icon Fonts for the reasons to drop icon fonts.)
- Add logos of payment card brands and use them in the payment method selection page.
- Refresh the icons of social platforms, optimize them, and give them text labels. (Closes Icons of linked accounts do not have text as backup #2117. Closes Update Twitter logo to X #2309.)
- Drop icon fonts (Glyphicons and Forkawesome). Add SVG files from [Bootstrap Icons](https://icons.getbootstrap.com/) as replacements. (See [Inline SVG vs Icon Fonts](https://css-tricks.com/icon-fonts-vs-svg/) and [Stop Using Icon Fonts](https://www.irigoyen.dev/blog/2021/02/17/stop-using-icon-fonts/) for the reasons to drop icon fonts. In short, they're an obsolete hack.) - Add logos of payment card brands (copied from Stripe) and use them in the payment method selection page. - Refresh the icons of social platforms, optimize them, and give them text labels. (Closes #2117. Closes #2309.)
|
|
Codecov ReportAttention: Patch coverage is
Additional details and impacted files
|
|
Loading the Liberapay front page currently requires downloading 240.88 kB of data. The changes in this branch should cut that number almost in half. |
Changaco
force-pushed
the
icons
branch
2 times, most recently
from
d08a58f to
fcd8471
Compare
This should improve performance by further reducing network traffic. The SVG file is always loaded from the same domain as the page it's linked from, because cross-domain requests would allegedly be blocked by Chrome and possibly by other browsers.
|
Thanks for your work. you can add |
|
@iacore You were still looking at the old icons. The new ones have now been deployed. All the instructions on contributing are in the README. If you'd like to contribute on CSS issues, Liberapay needs to be updated from Bootstrap v3 to v5: #940. There is currently no way to run Liberapay without a PostgreSQL database. |
|
some new icons are not vertically aligned
|
|
The icons are vertically centered. The alignment doesn't look as good as in other places because in these buttons the text is larger than the icon (20px vs 16px). I tested scaling the icons to match the text but I didn't really like it better. |
|
On some Zoom levels, this icon is clipped. (not just the RSS icon, also "info" and "globe", presumably every icon.) The SVG probably need some margin.
|
|
It looks like the browser is incorrectly scaling the SVG. There doesn't seem to be any way to work around this bug. |
Actual result: 128.39 kB. (Neither number includes the Ubuntu font files, because my browser has them locally, so it doesn't need to download them.) |
The SVG need to larger than the icon. Currently the SVG is exactly, as large as the icon (the visible part). |
|
Increasing the height and width of the SVG view box by one unit does eliminate the scaling overflow. |
