Next/Prev Buttons

[simbleau]

2 small issues:

1- Links do not have a discernible name when using fontawesome, I think this means there is not alt value?

2- Pagination icons are not properly centered

[Jieiku]

Adding the Alt names is easy, will do that today.

The centering of those icons is a font issue. I tried for an hour to center them, and in the end was unable to, but didn't think they looked that bad. The only thing I can think to do is just rip them out to svg files and add them as icons to Abridge, will try doing that today.

[simbleau]

Disregard the font issue- I can choose another icon ;)

[Jieiku]

I am actually considering doing something like this for abridge: https://blog.webjeda.com/optimize-fontawesome/

The problem now is that by doing a deferred load of FontAwesome, we get a good page load score, but that is not all that is important for user experience, clicking page to page you will often see a page flicker, especially on desktop chromium. The only way around this is to NOT defer the loading of FontAwesome, but because FontAwesome is absolutely massive that is not a good idea.

The solution I think is to create a custom Bundle with only the Icons that we need.

The problem is I don't want to add icons for users everytime they find an icon they want to add... So I am thinking I will make a couple default bundles, and then add instructions on how users can create their own bundle if they want to add more icons.

I am still brainstorming on some of this.

The integrated icons in Abridge for the brands in the footer work good, but for icons that can change colors a web font is best. (Firefox can do this via mask but chrome still has issues.)

[Jieiku]

I figured out a solution by playing tricks with the padding, will push the fix soonish.

[Jieiku]

Abridge now has its own Icon Font based on Font Awesome, it includes 6 icon fonts: (additionally I reworked the search icon to very closely resemble the search icon from fontawesome)

icon_search = "svgs search" # Search button in search box.
icon_adjust = "svgs svgh i-adjust" # Theme Switcher button in top menu.
icon_top = "svgs i-up" # Back to Top Button.
icon_first = "svgs i-first" # Pagination First Page.
icon_prev = "svgs i-prev" # Pagination Previous Page.
icon_next = "svgs i-next" # Pagination Next Page.
icon_last = "svgs i-last" # Pagination Last Page.

https://abridge.netlify.app/

PS: Fontawesome can still be used for these/other icons, but it no longer needs to be used for these ones.

The abridge font is minuscule, only 788 bytes:

compared to Font Awesome at 253,670 bytes:

FontForge was used to create the new Font, it was a bit cumbersome to do, I will write up some steps on creating a custom font, so that people can add icons as they need to.

[simbleau]

Ooh, this looks good.

Yeah, can't wait to hear how you compiled them.

[Jieiku]

The fontsubset repo is now here: https://github.com/Jieiku/fontsubset

I also updated the readme again.

after you run that script you should have .woff2 files in the assets folder, these woff2 files should have ONLY the glyphs defined in the package.json file.

you can verify that it is true by opening the font in FontForge, In the case of abridge, 7 icons get output to fa-solid-900.woff2

If I open fa-solid-900.woff2 in FontForge and then from the menu select encoding, compact (hide unused glyphs)

you can see it has only the defined icons:

additionally you can right click on a single icon and pick glyph info, it will show you the unicode value there:

You may need the unicode value when you setup the css file.

This May take a bit of work if you have not worked with a lot of fonts. Feel free to ask questions, just let me know what you have tried and what you do not understand, try to use very specific examples so that I can better help you.

FontForge is what I used for the first font I created, but now I ONLY use the script here: https://github.com/Jieiku/fontsubset

but FontForge is still useful for checking things in the font.

After you work through it feel free to submit a pull request to the readme, if you want to further improve it.

Thanks!

[simbleau]

Ok I got it all working :)

Small issue though, more than 1 extra stylesheet doesn't seem to work

[Jieiku]

that is odd, I will investigate it later tonight, I used a for loop in tera template syntax