Ryan Ashbrook Posted December 9, 2018 Share Posted December 9, 2018 7 hours ago, The Old Man said: Font Awesome 5 changelog v5.6.0 - 2018-12-07 Huh? Wait...! Is that...? 😃 I wouldn’t get too excited, unfortunately. 😉 Link to comment Share on other sites More sharing options...
Adlago Posted December 9, 2018 Share Posted December 9, 2018 Font awesome is not the best solution. Why - because it provides a delay in loading site ... And the more new things create the more you will be delayed loading site. I personally got tired of watching empty squares at the loading site. Perhaps it is good to look for other solutions. For example - the three icons that load in mobile version navigation, I replaced with data images. Loading instantly ... Day_ 1 Link to comment Share on other sites More sharing options...
The Old Man Posted December 10, 2018 Share Posted December 10, 2018 21 hours ago, Ryan Ashbrook said: I wouldn’t get too excited, unfortunately. 😉 Nuts. Link to comment Share on other sites More sharing options...
Joy Rex Posted January 2, 2019 Share Posted January 2, 2019 On 12/9/2018 at 5:18 PM, Adlago said: Font awesome is not the best solution. Why - because it provides a delay in loading site ... And the more new things create the more you will be delayed loading site. I personally got tired of watching empty squares at the loading site. Perhaps it is good to look for other solutions. For example - the three icons that load in mobile version navigation, I replaced with data images. Loading instantly ... Yeah, I am seeing where data images are the preferred method (although that does add to page weight (KB)) for faster loading. Link to comment Share on other sites More sharing options...
Adlago Posted January 2, 2019 Share Posted January 2, 2019 34 minutes ago, Joy Rex said: Yeah, I am seeing where data images are the preferred method (although that does add to page weight (KB)) for faster loading. yes, but the added weight is incomparably less. Font awesome causes a download of 65kB file and this slows rendering. Link to comment Share on other sites More sharing options...
The Old Man Posted January 2, 2019 Share Posted January 2, 2019 You can speed things up by only using the style of icons you actually need. 65kB is that small a file though, it's surely insignificant by today's broadband speeds, unless you're stuck still using a 14.4 kbit/s dial up modem! Link to comment Share on other sites More sharing options...
Tom S. Posted January 2, 2019 Share Posted January 2, 2019 1 minute ago, The Old Man said: You can speed things up by only using the style of icons you actually need. Or if you're willing to put in the work, you can download the icons you need as an svg file and host them locally. Added bonus is that's one less external call your site has to make. The Old Man 1 Link to comment Share on other sites More sharing options...
Rikki Posted January 2, 2019 Share Posted January 2, 2019 33 minutes ago, Adlago said: yes, but the added weight is incomparably less. Font awesome causes a download of 65kB file and this slows rendering. Only for the first visit - whereas using data:image means it's being downloaded on every page view. For a single icon (like your menu bars example) I'd agree that's the best approach, and that's what I do on my personal projects normally, but when we're using dozens of different icons in hundreds of places, it doesn't make sense. That said, web development is always moving forward, so when our next major update begins, we'll evaluate the best approach at that point. Joy Rex, Jim M, Daniel F and 3 others 6 Link to comment Share on other sites More sharing options...
Adlago Posted January 2, 2019 Share Posted January 2, 2019 3 hours ago, The Old Man said: You can speed things up by only using the style of icons you actually need. 65kB is that small a file though, it's surely insignificant by today's broadband speeds, unless you're stuck still using a 14.4 kbit/s dial up modem! Pay attention - how late is the loading font awesome well after basic resources have been loaded - and the browser waits - that slows site rendering. More curious is that this delay reduces the value of ads, of course for anyone who expects money from Google. I'm not worried about myself - I do not use ads. But I think the font awesome is a poor place in the suite. The same delay, unfortunately, is also observed in 4.4 alpha. AlexJ 1 Link to comment Share on other sites More sharing options...
Adlago Posted January 2, 2019 Share Posted January 2, 2019 3 hours ago, Rikki said: Only for the first visit - whereas using data:image means it's being downloaded on every page view. For a single icon (like your menu bars example) I'd agree that's the best approach, and that's what I do on my personal projects normally, but when we're using dozens of different icons in hundreds of places, it doesn't make sense. That said, web development is always moving forward, so when our next major update begins, we'll evaluate the best approach at that point. I agree that using data: image must also be refined and very carefully used. And here we have a reasonable compromise. But I think there should be quicker decisions - I'm also looking for them. Link to comment Share on other sites More sharing options...
bfarber Posted January 3, 2019 Share Posted January 3, 2019 In your test, the file is being refetched from the server/host but for most end users the file will be cached in the user's browser after their first visit. This means that on every page load after the first, the font file does not need to be redownloaded or reprocessed. Like everything in development, it's a trade off. This approach tends to be more efficient than multiple separate images, for instance. They may download in parallel, but will consume more storage space (and subsequently require more "management") and bandwidth. We feel our current approach is presently the best solution, but as Rikki said we will continue evaluating and if (when) a better solution becomes mainstream we will certainly use it. Link to comment Share on other sites More sharing options...
Adlago Posted January 3, 2019 Share Posted January 3, 2019 This test I do on this site as a guest - as every online tool does a test. Such an estimate speed makes and Google when analyzing the sites in which it publishes advertisements. This reduces the price paid by site owners. Of course, users who logged into a site do not have this issue. But when it comes to money - any delay in loading site is bad. And I see many sites that rely on this ... AlexJ 1 Link to comment Share on other sites More sharing options...
Rikki Posted January 3, 2019 Share Posted January 3, 2019 2 hours ago, Adlago said: This test I do on this site as a guest - as every online tool does a test. Such an estimate speed makes and Google when analyzing the sites in which it publishes advertisements. This reduces the price paid by site owners. Of course, users who logged into a site do not have this issue. But when it comes to money - any delay in loading site is bad. And I see many sites that rely on this ... It's cached for guests too after their first page load. You don't have to log in to get caching (in fact, our caching is even more aggressive for guests than members, since they all see the same thing). Your tests are likely assuming an empty cache, which is a fair measurement of a first-time visit/stale cache, but subsequent page loads will be loading FA from cache, not the server. Rhett, bfarber and Makoto 2 1 Link to comment Share on other sites More sharing options...
Adlago Posted January 3, 2019 Share Posted January 3, 2019 1 hour ago, Rikki said: It's cached for guests too after their first page load. You don't have to log in to get caching (in fact, our caching is even more aggressive for guests than members, since they all see the same thing). Your tests are likely assuming an empty cache, which is a fair measurement of a first-time visit/stale cache, but subsequent page loads will be loading FA from cache, not the server. For a normal users - you are right. Cache works correctly. But when a speed test is done by a machine - incl. and these Google machines, these machines do not use cache. The http/2 protocol speeds up CSS and JS, but font awesome slow down a browser. Here are three concurrent tests from different test server- all reflect this delay. aXenDev and AlexJ 2 Link to comment Share on other sites More sharing options...
ptprog Posted January 4, 2019 Share Posted January 4, 2019 Has anybody tried to use '<link rel="preload" ...>' to load fonts? Any idea if this improves performance? Link to comment Share on other sites More sharing options...
Adlago Posted January 4, 2019 Share Posted January 4, 2019 2 hours ago, ptprog said: Has anybody tried to use '<link rel="preload" ...>' to load fonts? Any idea if this improves performance? Add in your globalTemplate before </head> <link rel="preload" href="https://your site/applications/core/interface/font/icomoon.woff?v=-29n77j" as="font" type="font/woff" crossorigin="anonymous"> <link rel="preload" href="https://your site/applications/core/interface/font/fontawesome-webfont.woff2?v=4.7.0" as="font" type="font/woff2" crossorigin="anonymous"> AlexJ 1 Link to comment Share on other sites More sharing options...
sadams101 Posted January 5, 2019 Share Posted January 5, 2019 (edited) I will try this Edited January 6, 2019 by sadams101 Wrong place. Link to comment Share on other sites More sharing options...
ptprog Posted June 15, 2019 Share Posted June 15, 2019 On 1/4/2019 at 3:54 PM, ptprog said: Has anybody tried to use '<link rel="preload" ...>' to load fonts? Any idea if this improves performance? Regarding performance, my experiments show a small degradation of performance (15% ~ 20%, measured with a RUM script) during the period I used the preload setting. Joel R 1 Link to comment Share on other sites More sharing options...
CyanideBurial Posted November 15, 2019 Share Posted November 15, 2019 any update on this? Link to comment Share on other sites More sharing options...
Adriano Faria Posted November 16, 2019 Share Posted November 16, 2019 11 hours ago, CyanideBurial said: any update on this? They already replied in this topic: By “major upgrade” understand IPS5. Link to comment Share on other sites More sharing options...
The Old Man Posted November 16, 2019 Share Posted November 16, 2019 (edited) FA5 has been out for so long and had like a dozen releases that, I can't believe it still hasn't been properly integrated. Grumble, dropped the ball, mumble, mutter.... Just kidding. 🥰 The new FA5 extra icons packs are really nice. I wonder if IPS might one day release a SASS/LESS where CSS can be more quickly updated. Not had much time to test but a few days ago I tried out the new FA5 'kits' option with IPS4.4.8 and it certainly has great potential. Anyone else tried it yet? You basically remove the existing FA4 import code and install one line of JS script to pull in your newly created kit, then on the FA5 dashboard site you can flick one of the toggle switches, and in theory it upgrades you on the fly to FA5, but better than the old 4-5 shim they originally released as a stop gap because it corrects any outdated icon codes and adds ARIA accessibility on the fly (i.e. all of them In the case of IPS!). It also only loads the icons you need, which sounds like a great performance boost. It allowed me to use Duotone icons. I tried the web font option first then the faster recommended SVG option, it worked but some icons seemed a bit off vertical alignment wise, on overlaid icons like the Twitter and YouTube social media buttons in the footer. So I switched back to the web font version for now, however it may be because I'd been editing the pseudo CSS a bit for something else just prior, so it may work as intended. Edited November 16, 2019 by The Old Man sobrenome 1 Link to comment Share on other sites More sharing options...
Pete T Posted November 17, 2019 Share Posted November 17, 2019 20 hours ago, The Old Man said: FA5 has been out for so long and had like a dozen releases that, I can't believe it still hasn't been properly integrated. Grumble, dropped the ball, mumble, mutter.... Just kidding. 🥰 The new FA5 extra icons packs are really nice. I wonder if IPS might one day release a SASS/LESS where CSS can be more quickly updated. Not had much time to test but a few days ago I tried out the new FA5 'kits' option with IPS4.4.8 and it certainly has great potential. Anyone else tried it yet? You basically remove the existing FA4 import code and install one line of JS script to pull in your newly created kit, then on the FA5 dashboard site you can flick one of the toggle switches, and in theory it upgrades you on the fly to FA5, but better than the old 4-5 shim they originally released as a stop gap because it corrects any outdated icon codes and adds ARIA accessibility on the fly (i.e. all of them In the case of IPS!). It also only loads the icons you need, which sounds like a great performance boost. It allowed me to use Duotone icons. I tried the web font option first then the faster recommended SVG option, it worked but some icons seemed a bit off vertical alignment wise, on overlaid icons like the Twitter and YouTube social media buttons in the footer. So I switched back to the web font version for now, however it may be because I'd been editing the pseudo CSS a bit for something else just prior, so it may work as intended. I only played with FA5 few times myself as really like the feel of the icons vs FA4 never noticed the toggle for loading both normal just use css to fix the issues between the to, The Old Man 1 Link to comment Share on other sites More sharing options...
Daniel F Posted November 17, 2019 Share Posted November 17, 2019 While it's AFAIK not possible out of the box, I'm using https://iconify.design to use FA4, FA5, PrestaShop Icons and Dashicons with IPS (and Wordpress) with the same codebase. It's quite easy to implement for own projects. The Old Man, Cyboman and sobrenome 2 1 Link to comment Share on other sites More sharing options...
Jordan Miller Posted February 23, 2020 Share Posted February 23, 2020 I tried using this tutorial to add custom font awesome icons to my forum, but it's not working. Any idea why that could be? I used: [data-forumid="47"] .fa-comments:before { content: "\f025"; } For this forum: https://www.breatheheavy.com/exhale/index.php?/forum/47-music-news-forum/ No luck! Link to comment Share on other sites More sharing options...
ehren. Posted February 23, 2020 Share Posted February 23, 2020 For the sake of simplicity, just add !important to the end of that. [data-forumid="47"] .fa-comments:before { content: "\f025" !important; } The reason it's not working is because the code which is used to create the "lightbulb" icon (possibly added by ThemeTree) has a higher specificity. Jordan Miller 1 Link to comment Share on other sites More sharing options...
Recommended Posts