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

Upgrade Font Awesome 4 to 6 #551

Merged
merged 11 commits into from
May 11, 2022
Merged

Upgrade Font Awesome 4 to 6 #551

merged 11 commits into from
May 11, 2022

Conversation

bennothommo
Copy link
Member

Replaces #445 and #447.

This PR upgrades Font Awesome 4 to Font Awesome 6, bringing the number of available icons from 675 to 1748, as mentioned in the above PRs. It has been implemented using Font Awesome's LESS files, but keeps everything backwards compatible by shimming the old icon variables and ensuring the old classes point to the correct font weighting and icon.

This does increase the Backend assets from 4.84MB to 5.06MB (an increase of ~220kb) uncompressed - I haven't tested this using GZIP but would estimate it would equate to around 50-60kb, so shouldn't be too much of a hit.

@bennothommo bennothommo added maintenance PRs that fix bugs, are translation changes or make only minor changes needs review Issues/PRs that require a review from a maintainer labels May 6, 2022
@bennothommo bennothommo added this to the v1.2.0 milestone May 6, 2022
@bennothommo
Copy link
Member Author

Screenshots

Before

Screenshot 2022-05-06 at 13-54-25 Settings Winter CMS

After

Screenshot 2022-05-06 at 13-54-00 Settings Winter CMS

@LukeTowers
Copy link
Member

@bennothommo are you also able to update the UI Icon docs in this PR? Should we like to the FontAwesome 6 site instead of hosting it all ourselves?

@bennothommo
Copy link
Member Author

@LukeTowers I was thinking that, but we do use a different class structure for the icons. They provide a JSON schema of all icons so it may not be too difficult to create a component that can generate the list in our docs.

@LukeTowers
Copy link
Member

16k icons is a lot. I'd be fine with just including instructions for how to change their class names to ours and then linking to their docs. They have a custom algolia integration in order to search all of the icons, I don't really want to go down that road on our end too.

We will load icons independently in another file so it can be cached independently.
Also separated the global base styles for icons with the actual icon list, so we can limit the icons loaded (ie. for the standard exception / error views)
@LukeTowers LukeTowers added Status: Completed enhancement PRs that implement a new feature or substantial change and removed maintenance PRs that fix bugs, are translation changes or make only minor changes needs review Issues/PRs that require a review from a maintainer labels May 11, 2022
@LukeTowers LukeTowers merged commit 613a925 into wip/1.2 May 11, 2022
@LukeTowers LukeTowers deleted the wip/1.2-font-awesome-6 branch May 11, 2022 07:32
@WebVPF
Copy link
Contributor

WebVPF commented May 12, 2022

@bennothommo there is no content property for brand icons in css.
Example: https://github.com/wintercms/winter/blob/wip/1.2/modules/system/assets/ui/icons.css#L6299-L6301

.icon-css3:before,
.wn-icon-css3:before,
.oc-icon-css3:before{font-family:'Font Awesome 6 Brands';font-weight:400}

2022-05-12_115701

@bennothommo
Copy link
Member Author

@WebVPF sorry, it appeared I hadn't included the brand icons in the compiled icon CSS.

They're included now. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement PRs that implement a new feature or substantial change
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants