Jump to content

Community

jair101

Font awesome 5.0

Recommended Posts

Looking forward to IPS4 supporting this as FA 5 is now out.

FA have provided a shim until we upgrade to FA 5 properly but I know FA4 is built into the IPS package, so I'm not sure if its applicable*. I see you can download v5.0.2 so perhaps its not too much work for IPS to support soon.

https://fontawesome.com/how-to-use/upgrading-from-4
https://fontawesome.com/get-started/svg-with-js#

Beyond the basic free FA5 icons, FA 5 Pro customers have access to the larger collection of Pro only icons and will have access to the forthcoming FA5 Pro CDN.
It would be great to have simple built-in options perhaps in the IPS theme settings or perhaps in the Community Enhancements section of AdminCP in order to integrate and access the Pro only icons and the CDN/API key details.

I can already see many icons in the Pro range that will make potential good icons for the Trophy and Awards add-on. :thumbsup:

Updated: *I just copy and pasted the two lines of the shim code mentioned above into the header section of IPS (globalTemplate) and the new FA5 free icons start displaying.

<!-- FA Version 4 Shim (SVG with JavaScript only) -->
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/v4-shims.js"></script>

I tried it with the code for the Light Pro only lighter version of the FA 5 snowflake icon, and it displays the Regular version rather than nothing at all, so very handy until FA 5 Pro integration is possible and supported, when presumably the Light Pro icon would appear instead of the Regular.

Edited by The Old Man
Shim seems to work fine with FA5 (free only icons!)

Share this post


Link to post
Share on other sites
On 12/30/2017 at 11:17 AM, The Old Man said:

and the new FA5 free icons start displaying

  <script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
  <script defer src="https://use.fontawesome.com/releases/v5.0.0/js/v4-shims.js"></script>

When you do this some changes that take place are for example from what FA says the icons inherit text size and that is shown when adding the lines you added. So for example your usernav icons become small because they inherit the text size and also for example your check boxes icons like the checkmark itself gets very large. Obviously IPB will need to make adjustments to all these areas when moving into FA5.

So yes, the code above works, but some areas will appear different from the original IPB design intention.

I personally love FA and am positive IPB will upgrade us, question is when and I think there's more than enough time to add these to 4.3 possibly.. I say possibly here :) 

Edited by DesignzShop

Share this post


Link to post
Share on other sites
1 hour ago, All Astronauts said:

@Lindy for lack of knowing which developer to @

Is this on tap for 4.3? I noticed the FA website itself has now flashed over to 5 and parked the 4x stuff in a sub-section. 

There is no need to tag anyone really as we all read this feedback section regularly.  From what I understand the changes needed for font awesome 5 are pretty large, too large to hold up 4.3, which is already in the stages of internal testing. 

Thank you

 

Share this post


Link to post
Share on other sites

Sad its not going to be supported in v5. :unsure:

They made a v4 shim for quicker updating to 5.x (you can also stick with the Web Fonts with CSS icons rather than upgrade to the SVG icons) or you can follow this process for a complete upgrade which seems to be mostly search and replace tasks.

https://fontawesome.com/how-to-use/upgrading-from-4

Quote

Upgrade Steps

Ready to do a full, proper upgrade and completely replace version 4 with version 5?

  1. Remove Old Files. Remove the files associated with Font Awesome Version 4 from your project - including the fontawesome/ folder of web fonts and CSS/SCSS/LESS (if you’re using Font Awesome’s CDN, you can skip this step.)
  2. Remove Old References in <head>. Remove the reference to Font Awesome V4’s JS or CSS from the <head> of your document.
  3. Get Started. Pick your method of using FA5 and follow the Get Started directions. (SVG with JavaScript, Web Fonts with CSS, or Advanced Options)
  4. Search & Replace. Find and replace any icons that have different names between version 4 and 5. Make sure to read the complete list below.
  5. Update Styling. Update any custom styling you’ve added around Font Awesome icons (if applicable).
  6. Double Check. Click through your project’s UI to make sure all icons are rendering as expected.

Perhaps someone at IPS could do a feasibility test on the full, proper upgrade to v5x? :wub:

Share this post


Link to post
Share on other sites
On 12/30/2017 at 5:17 PM, The Old Man said:

Looking forward to IPS4 supporting this as FA 5 is now out.

FA have provided a shim until we upgrade to FA 5 properly but I know FA4 is built into the IPS package, so I'm not sure if its applicable*. I see you can download v5.0.2 so perhaps its not too much work for IPS to support soon.

https://fontawesome.com/how-to-use/upgrading-from-4
https://fontawesome.com/get-started/svg-with-js#

Beyond the basic free FA5 icons, FA 5 Pro customers have access to the larger collection of Pro only icons and will have access to the forthcoming FA5 Pro CDN.
It would be great to have simple built-in options perhaps in the IPS theme settings or perhaps in the Community Enhancements section of AdminCP in order to integrate and access the Pro only icons and the CDN/API key details.

I can already see many icons in the Pro range that will make potential good icons for the Trophy and Awards add-on. :thumbsup:

Updated: *I just copy and pasted the two lines of the shim code mentioned above into the header section of IPS (globalTemplate) and the new FA5 free icons start displaying.


<!-- FA Version 4 Shim (SVG with JavaScript only) -->
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/v4-shims.js"></script>

I tried it with the code for the Light Pro only lighter version of the FA 5 snowflake icon, and it displays the Regular version rather than nothing at all, so very handy until FA 5 Pro integration is possible and supported, when presumably the Light Pro icon would appear instead of the Regular.

where can i find the globalTemplate ? 

 

rushed in too soon, found it. 

Edited by Vanucci

Share this post


Link to post
Share on other sites

The biggest issue with using FA5 is which method to use - SVG+JS will render (in my opinion) cleaner icons than the other (older) method, which is using the webfont. One important thing to consider when using the SVG+JS method is performance - if you have dozens of icons on screen, the JS has to find all the <i> elements and replace them, and using ::before and ::after pseudo elements can degrade performance even further.

Share this post


Link to post
Share on other sites

Why do we need font awesome 5 again? Doesn’t the document weight grow with each iteration of FA? I’m not sure I want to sacrifice speed for more icons

Share this post


Link to post
Share on other sites
On 6/14/2018 at 3:57 PM, SJ77 said:

Why do we need font awesome 5 again? Doesn’t the document weight grow with each iteration of FA? I’m not sure I want to sacrifice speed for more icons

You right. Globally IPS doesn't need to include big monstrous FA5 (or any else). But with last Rikki answer, I hope they'll create some build tool for an ability to include custom font build with icons which are actually needed. In my humble opinion, this way will be an amazing solution, which may be named as a really good new improvement. Let's wait and see :cool:

Share this post


Link to post
Share on other sites
On 6/20/2018 at 10:35 AM, Joy Rex said:

I think IPS should have its own SVG-based (or custom icon font) icon set for the default forum theme, and allow theme creators to specify their own or a library like FontAwesome (again, either SVG or icon font).

Why exactly? That would basically require an in-house designer to recreate what is already available through a freely licensed source (FontAwesome). What benefit would be gained?

Share this post


Link to post
Share on other sites

I'm happy with font awesome, but I'd wish to have any integration for an individual icon font, too. Graphical experience (and customization options) are an important usage animation factor nowadays. Currently I'm using hundreds (!) of individual icons uploaded as png, and according to the optimization of loading times, we would benefit of having options for additional vector integrations. I'm not sure, if it is wise to have 2 icon fonts included and using both of them at the same time, but it seems better to me than my png solution ? 

Share this post


Link to post
Share on other sites
On 6/20/2018 at 7:06 AM, Upgradeovec said:

You right. Globally IPS doesn't need to include big monstrous FA5 (or any else). But with last Rikki answer, I hope they'll create some build tool for an ability to include custom font build with icons which are actually needed. In my humble opinion, this way will be an amazing solution, which may be named as a really good new improvement. Let's wait and see :cool:

 

3 hours ago, bfarber said:

Why exactly? That would basically require an in-house designer to recreate what is already available through a freely licensed source (FontAwesome). What benefit would be gained?

As @Upgradeovec mentioned, libraries like FA are (relatively) massive and you're probably using 1-5% of FA's library for IPS. If you created an icon set with just the icons needed for IPS and nothing more, it would be drastically smaller.

And you wouldn't need an in-house designer; just contract with a designer on an as-needed basis to create the initial icons, and reach out as needed when more are required or a visual refresh is in order.

Hopefully FontAwesome will have as @Upgradeovec suggested a "custom build" so only the icons needed would be included to reduce the overall footprint of FA, then it could be configured to exactly each person's needs.

Share this post


Link to post
Share on other sites

Font Awesome via its CDN is so popular and widely used that I honestly think most visitors have probably never downloaded it or will ever need to download it via your community's website. Their browsers will have downloaded and therefore cached it way before from elsewhere. Even for those minimal few who say, just got online and visited your site as their first ever website, would only have to download it once anyway. Then it's done. It's like complaining about having to download Bootstrap or JQuery. Sure if your benchmarking it will increase your download time, but real world users will normally come across it way before. Obviously chances are a little less so with the Pro version.

If you take the Bootstrap analogy for a second, surely it's better to use Bootstrap per se, rather than sticking a prefix before every class selector name. Then you do have to download that JavaScript and CSS because you've customised it.

Its free (so really what's to complain about?!), it's cool (remember how dull IPB looked before snazzy modern Font Awesome?!), FA5 has better, updated, larger icons (not based on 14px anymore, just like Bootstrap 4 isn't). 

I felt so warm and fuzzy around my nether regions after watching THAT funny video that I bought the Pro version albeit at the early adopter rate, something I've never done before.

I'd love to be able to make better use of FA5 and get the benefits of the Pro even nicer icons, icon packs and CDN If possible in IPS for example as nicer trophies and awards. I'd love to just settle for FA5 standard before the next decade starts though!

Edited by The Old Man

Share this post


Link to post
Share on other sites
On 6/14/2018 at 1:03 PM, Rikki said:

We don't plan to switch to FA5 for the time being. It'll be something we consider for the next major update.

4.4? Probably 4.5 but still worth an ask now. Just looking for certainty as us devs gear up for updating apps, etc...

Share this post


Link to post
Share on other sites

Font Awesome 5 changelog v5.6.0 - 2018-12-07

Huh? Wait...! Is that...?

Quote

Added

  • Holiday category
  • Winter category
  • A nice selection of the top requested icons from the Font Awesome Leaderboard
  • Sponsored icon horse-head
  • Brand icons adobe, artstation, atlassian, centos, confluence, dhl, diaspora,
    fedex, fedora, figma, intercom, invision, jira, mendeley, raspberry-pi,
    redhat, sketch, sourcetree, suse, ubuntu, ups, usps, and yarn
  • The Canadian Maple Leaf (Aboot time, eh. You hosers.)

😃

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...