Importing only the FA icons needed?

I’ve put this post in the BWD section as, in this instance, it’s related to ButtonPlus2. However, it’s not about PB2, per se. But about Font Awesome.

I’m building a generic “contact bar” that can be dropped easily into various projects. The demo is here: Untitled Page | My Website

The concept is pretty simple: Have contact info always visible by way of a contact bar at the top of each page. PB2 is the perfect button stack to use for this task, as it’s so customisable.

As you can see, it consists of three buttons, right aligned, with contact info and an icon in each. On smaller screens, the text will disappear, and only the icon (which increases in size on mobile) is visible. The buttons are set to not stack on small screens.

This test project is built using @Jannis Blankstrap 5 theme. By default this doesn’t import Font Awesome. Instead, there is an additional stack to import them. These are required as ButtonPlus2 uses them.

My question…

How can I only import the three FA Icons needed by BP2, as opposed to the whole lot of them?

I ask this, because some of the frameworks and themes I use do not import FA by default but instead use other icon sets. So I’ve no requirement for them all, only the three used in the contact bar.

Anyone any ideas?

Going to tag @tav in this, as he’s normally got some good input on this sort of thing.

Just done some tests. The contact bar, on its own weighs about 200kbs. Not lightweight! But, having this sort of info very easy to locate is vital for certain types of sites, so that’s livable. It could be slimmed down but at the cost of functionality and ease of use.

The FA library adds about 50kb. It’d be nice to lose most of that additional bloat, given only three icons are used.

Would SVG files of the three graphic by any better?

They would, but I’m not sure how to force BP2 to use them as opposed to FA icons.

Edit: To expand on that a bit: I would be easy to just put the URL to the SVG file into the text area for the button, but then I’d be unable to adjust the size of each between screen sizes. Ss it is, at the moment, on small screens, the text reduces to zero rems (so it disappears) and the icon increases.

I made a post about how to use custom icons in BP2.
You can use this technique to subset FontAweful or any other icons that you want. You can even mix some FA icons with your own logos (like I did on the BP2 demo site)

In BP2 settings, there is a icon set input as well as the specific icon. This allows you to change the icon prefix class name from fa to anything else you like - either your own or something premade (there are hundreds of icon sets available).

2 Likes

I can’t help thinking that you are vastly overthinking this and creating a heavy overly complex solution. It looks like over 200kb of code and is already slow according to Google.

IMHO the icons add nothing in the way that they did back in 2015. When we see an email address in 2022, we know it is an email address and don’t need an envelope icon next to it. If anything, the icons add clutter and are a distraction. Those icons will also need aria-labels to describe what they are. Screen readers won’t have a clue about the Address one.

Why not add a flexbox with 3 items of linked text that read ADDRESS - 0123 456789 - info@email.com. The address already opens a nice box with buttons, so add the actual address in there. Then add a line of CSS to hover the BG colour and you will be done. The result will be quick and about 100 times smaller.

@tav Thanks for that, worked a treat with homemade icons.

@Webdeersign The icons are needed for smaller screens when there is no text. I could hide them on larger screens, so it’s only text, but it won’t gain much.

If I used flexbox, and had the links stack on smaller screens they would take up far too much real estate.

This is what it looks like on screens below 640.

I’ve finished making it. I’ll leave this here, and the test/demo version in place, for anyone finding this in the future, in case they want some ideas.

The final version is here: Contact bar 2 | My Website I’ve expanded it a bit to give all the buttons consistency over different device sizes.

This is not a lightweight addition to any page, so be warned. I’ve trimmed it down, but it will still add about 200kbs to the page. If you are a lightweight page obsessive, this most likely isn’t for you!

But bear in mind, many page-weight obsessives tend to be living in the internet age c. five to ten years ago, when 3G was the new kid on the block and broadband was slow. Now we all have 5G and full fibre, so an obsession with page weights, to the point of limiting a web page’s effectiveness, is daft.

For many website owners, the sole purpose of their site is to encourage site visitors to get in touch, so to my mind, in many instances, putting contact details front and centre and making the details as easy to use as possible rules above a lot of the other fancy stuff people do with websites nowadays. But this is just my thinking. Each to their own, etc.

Anyway, back to this little project. it’s built using only ButtonPlus2. It’s really quite simple, it just took some time to think about how to use the BP2 settings to achieve what I wanted. But everything you need is there in BP2, should anyone wish to replicate it.

It would be well worth adding the Address element to the address button, otherwise screen readers may not know what it is. Similarly Tel for the phone number. See <address>: The Contact Address element - HTML: HyperText Markup Language | MDN .

While it’s not small it works well. Nice idea!

I don’t know what is not lightweight about your icon bar solution?

Your custom wof file is 1kB.

It’s only all the Bootstrap CSS and JS that you are not really using that adds to the size of the finished page. This would be the case for any page using a framework just for a simple one item demo element and some text.

Your address bar will add negligible kB to any page made with a framework or anything else.

I think its a nice solution - don’t knock yourself for it and don’t get size obsessed. People add 60kB or more of utility classes that they never use and just don’t realise it. One image is miles more.

I did some tests on the page, with and without the contact bar. The difference is about 150kbs. So I’m assuming that is the size of the contact bar. I think the page size is close to 750kbs, but that’s as you said, with all the theme stuff. Considering how much easier it makes it for end users to contact/visit the site owner’s business, 150kb is nowt. I’m very happy with it.

Its first deployment to a client site today increased the homepage page size from 1.1mb to 1.2mb (rounded). I didn’t bother to check others. So in the scheme of things, it’s, as you say, negligible. That site is built in UIkit (one of the reasons I needed the icon solution). I’ll be dropping it into some Foundry sites tomorrow.

1 Like

Remember that the stuff he’s using are non released test stacks that are not optimised or properly minimised and have the entire JS for the whole suite of stacks on the page while they are in beta stage (I know that has been 5 years!).

The actual subsetting of the icons though is very valid indeed and provides a compact and efficient solution.

Absolutely. More than 5 years surely. Just shows how ground breaking they were then and they still are today as we are almost into 2023…