FontAwesome icon issue | FontAwesome 图标问题

[ivan-nginx]

The icon library of the latest version of theme NexT has been migrated to FontAwesome 5. This change is not backward compatible, which means that the previous configuration for FontAwesome 4.7.0 will fail and the icons will not be displayed. If you have encountered related issues, please remove the customized icon and CDN link in the configuration file according to this Pull Request: #1438 .

最新版本的 NexT 主题迁移到了 FontAwesome 5。此改动不向下兼容，这意味着此前对于FontAwesome 4.7.0 版本的配置会失效，且导致图标无法显示。如果你遇到了图标问题，请根据此 Pull Request #1438 的更改，移除配置文件中自定义的图标和 CDN 链接，并重新进行配置。

---

Today i decided to update FontAwesome from v4 to v5 in accordance with #94 and #474 issues. Well, this was not hard and at least 2/3 icons was successfully shown. But! Trouble is happened (i know what Free and Pro versions – it's not simple way): free icons was very smoothly and some icons was not in their places (a little topped, a little bottomed)... Firstly i think what i not set some options or something like that. I try many parameters – without luck. And what are you guys thinking? I'm going on FA site and saw randomed PRO icon; lets see on Book) or on Bullhorn icon. See and click on from Free to PRO version. See this *hit? They specially make Free version more cloudy and PRO version more legibly. I compare NexT online site FA v4 to localhost with FA v5 – FA v4 looks like icons in PRO version.

So, as FA can't upgrade anymore, i suggest to switch on Material Design Icons (Google).

Let's compare icons number:

• FA v4.7.0 – 675 icons.
• MDI latest version – 2,346 icons (if i right understand). Of cource, mb icons repeated like FA (transparent / not), but anyway if 2,346 / 3 = 782.

Let's compare pack weight:

• FA v4.7.0 – 429 kb.
• MDI latest version – 5,3 mb.

What do you thinking, guys? I can soon switch from FA to MDI and up on test domain to see how they looks. If icons will better, we can totally switch on MDI (they, by the way, periodically add icons to main pack):

19 New Icons.
Latest commit 22874e5  4 days ago

Other Information

[maple3142]

Perhaps iconmoon will be a good solution, it support lots of iconpacks including FA4 and MDI, and it enable you to select icons you need. Otherwise, I don't think 5.3mb is suitable for web at all.

[ivan-nginx]

@maple3142 this? There are 490 icons with free license.

Otherwise, I don't think 5.3mb is suitable for web at all.

This is full pack. CSS weight about ~137 kb (FA was ~30 kb). See:

Mb SVG file (3.5 mb) not need, how you think? BTW, i cutted FA too from version 5 to version 6, when we do rebase.

Total weight MDI with normal work about ≈ 1 mb (FA ≈ 500 kb). So? Icons x3 more. See here for details.

[maple3142]

The website I provided (icomoon) can also offer both FA & MDI, and you just need to select what icon you need then pack it as a new icon font. With this, it can significantly reduce the size of icon font and provide multiple icon fonts.

[ivan-nginx]

Oooh! I see. Icomoon App at the right top corner. Ok, i'll try it.

[ivan-nginx]

Well, @maple3142, FA + MDI splitted ≈ 1.6 mb. And don't have woff2, which is do faster rendering on modern browser:

[maple3142]

The reason of using these icon pack is is smaller icon pack size, so you wouldn't want to use it if you simply select all icons. As for woff2, only premium version can generate it, and there is some free alternatives such as fontello(I currently use it in my site.).

[jiangtj]

@maple3142 If only select next using icon, how to change icon. Regenerate iconmoon pack? This may be a bit of trouble.

[ivan-nginx]

@JiangTJ @maple3142 i already find solution: 3rd-party icons (except FA) will be used as external modules, like Fancybox. Feature will be ASAP.

[stevenjoezhang]

I think font-awesome v5 is OK, at least it's working fine on my site (https://zhangshuqiao.org), and it's easy for users to update their settings. If we use some other 3rd-party icons instead, there would be several parts need to rewrite in _config.yml

Should notice that:

Outline Style Icons - Similarly, all icons that had an outlined style (and usually ended with -o) now have a prefix of far and have had their -o suffix removed.

See: https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4 And the default font-size in v5 seems larger than v4

In layout/_partials/post/post-copyright.swig fa fa-fw fa-creative-commons -> fab fa-fw fa-creative-commons

[stevenjoezhang]

And I found that fontawesome v5 conflict with han...

[ivan-nginx]

@stevenjoezhang where is conflict?

[stevenjoezhang]

@ivan-nginx I found this in source/css/_common/components/third-party/han.styl:

i.fa { font-family: FontAwesome !important; }

Because han.css will override all the font-family settings, it's necessary to use !important to declare the font-family of font-awesome icons. But the font name is changed in v5, so it's necessary to update the font name:

i.fa, i.far, i.fas {
    font-family: "Font Awesome 5 Free" !important;
}

or

i.fa, i.far, i.fas {
  font-family: FontAwesome, "Font Awesome 5 Free" !important;
}
i.fab {
  font-family: "Font Awesome 5 Brands" !important;
}

[ivan-nginx]

Ok, let's make this issue into Low Priority. For now we need to resolve #547 pull with cache generation (High Priority).

[JOduMonT]

if I may; ForkAwesome propose a good alternative of Font-Awesome 5 Have extra icons and keep the old way of calling these icon such as : <i class="fa fa-camera-retro"></i>

[1v9]

@jodumont I've tested and it's prety good.

[ivan-nginx]

@1v9 can u generate 2 live demos for compare both versions?

[1v9]

Sure, actually "nothing" changed, ForkAwesome is a fork of FontAwesome v4.7 + some new icons.

[stevenjoezhang]

Maybe it's time to update these internal libraries: jQuery, velocity and font-awesome we can't get rid of them in a short time

[1v9]

@stevenjoezhang I don't want PR, as I said, ForkAwesome is 'equal' to FontAwesome 😂

[maple3142]

Is there any benefits of replacing FontAwesome with ForkAwesome?

[1v9]

@maple3142 Anyway, I didn't find it. 🤷‍♂️

[Pilgrimss]

I am confused with social icons in the sidebar, the prefix of Facebook, Github icons are 'fab fa-fw', while the envelope icon with the prefix 'fa fa-fw'. However, in layout/_macro/sidebar.swig:

{% if theme.social_icons.enable %}
                   {% set sidebarIcon = '<i class="fa fa-fw fa-' + link.split('||')[1] | trim | default('globe') + '"></i>' %}
 {% endif %}
 {{ next_url(sidebarURL, sidebarIcon + sidebarText, {title: name + ' &rarr; ' + sidebarURL}) }}

If I change the 'fa fa-fw fa' to 'fab fa-fw fa', brand icons are shown, but envelope icon not. So how should we modify it to make brand icons and common icons displayed at the same time.

[Aqua-Dream]

Any progress? Does closing this issue mean there is no plan to update yet?

[jiangtj]

reopen... planning to upgrade v5?

[stevenjoezhang]

The best way is to find a tool that can generate and package fonts locally. This way users can always use the icons they want and avoid loading the entire font awesome icon library (it's too big even for CDNs).

Font Awesome 5 is about 200kb in total. It's acceptable.

[jiangtj]

The best way is to find a tool that can generate and package fonts locally.

This is possible, but requires npm

e.g. https://github.com/hexojs/hexo-fontawesome, we can use this plugin to convert to svg.

Although hexo plans to support npm installation themes, this will make users have to install the theme through npm or do some extra steps to install dependencies in order to use the theme they have cloned.

GitHub

hexojs/hexo-fontawesome

A utility function which helps to inline fontawesome SVG files. - hexojs/hexo-fontawesome

[stevenjoezhang]

hexo-fontawesome cannot handle dynamically loaded icons. We may need to develop a plugin based on this module: https://www.npmjs.com/package/webfont

I plan to split it into two steps:

• migrate to font awesome5,
• and then develop a plugin to allow users to package only the required icons and reduce the size of the woff2 font

npm

webfont

Generator of fonts from svg icons, svg icons to svg font, svg font to ttf, ttf to eot, ttf to woff, ttf to woff2