FontAwesome icon issue | FontAwesome 图标问题 #505

ivan-nginx · 2018-12-12T15:44:45Z

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

The text was updated successfully, but these errors were encountered:

maple3142 · 2018-12-12T16:17:06Z

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 · 2018-12-12T16:36:28Z

@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 · 2018-12-12T16:48:59Z

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 · 2018-12-12T16:54:29Z

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

ivan-nginx · 2018-12-12T17:18:59Z

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

maple3142 · 2018-12-13T11:34:29Z

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 · 2018-12-13T17:00:47Z

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

ivan-nginx · 2018-12-14T15:47:25Z

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

stevenjoezhang · 2018-12-27T13:52:31Z

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 · 2018-12-29T04:35:07Z

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

ivan-nginx · 2018-12-29T15:26:50Z

@stevenjoezhang where is conflict?

stevenjoezhang · 2018-12-29T16:14:40Z

@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 · 2018-12-29T16:16:31Z

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

JOduMonT · 2019-02-26T09:06:03Z

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 · 2019-03-16T11:10:04Z

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

Aqua-Dream · 2020-02-07T10:01:32Z

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

jiangtj · 2020-03-17T07:51:09Z

reopen... planning to upgrade v5?

stevenjoezhang · 2020-03-17T08:43:09Z

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 · 2020-03-17T10:13:02Z

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 · 2020-03-29T16:22:06Z

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

ivan-nginx added Discussion Question 🔌 3rd Party Plugin CSS Feature Request labels Dec 12, 2018

ivan-nginx pinned this issue Dec 13, 2018

ivan-nginx unpinned this issue Dec 13, 2018

ivan-nginx pinned this issue Dec 13, 2018

ivan-nginx added the 🎯 Roadmap label Dec 14, 2018

This was referenced Dec 14, 2018

NexT v7.x Roadmap #67

Closed

Social icon problem [solved] #474

Closed

Use FontAwesome 5 or custom .svg files #94

Closed

ivan-nginx added the Low Priority label Dec 29, 2018

ivan-nginx unpinned this issue Jan 5, 2019

stevenjoezhang mentioned this issue Feb 16, 2019

Suggestion: can we use the latest fontawesome, from v4.7 to v5? I tried and failed... #608

Closed

3 tasks

stevenjoezhang closed this as completed Jul 4, 2019

1v9 added the 🌀 Fonts label Aug 13, 2019

stevenjoezhang added the Solved label Aug 20, 2019

stevenjoezhang removed the CSS label Oct 14, 2019

stevenjoezhang added Discussion Backlog labels Nov 9, 2019

stevenjoezhang reopened this Feb 9, 2020

stevenjoezhang removed Backlog Solved labels Feb 9, 2020

stevenjoezhang mentioned this issue Feb 9, 2020

Font Awesome icon doesn't load #1375

Closed

stale bot added the Stale label Mar 10, 2020

stale bot closed this as completed Mar 17, 2020

sli1989 removed the Stale label Mar 17, 2020

sli1989 reopened this Mar 17, 2020

close-issue-app bot closed this as completed Mar 17, 2020

close-issue-app bot added the Invalid label Mar 17, 2020

stevenjoezhang removed the Invalid label Mar 17, 2020

stevenjoezhang reopened this Mar 17, 2020

theme-next deleted a comment from close-issue-app bot Mar 17, 2020

theme-next deleted a comment from stale bot Mar 17, 2020

stevenjoezhang mentioned this issue Mar 30, 2020

Migrate to Font-Awesome 5 #1438

Merged

stevenjoezhang pinned this issue Mar 30, 2020

stevenjoezhang changed the title ~~About FontAwesome~~ FontAwesome icon issue | FontAwesome 图标问题 Mar 30, 2020

stevenjoezhang closed this as completed in #1438 Apr 1, 2020

sli1989 unpinned this issue Aug 27, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FontAwesome icon issue | FontAwesome 图标问题 #505

FontAwesome icon issue | FontAwesome 图标问题 #505

ivan-nginx commented Dec 12, 2018 •

edited by stevenjoezhang

Loading

maple3142 commented Dec 12, 2018

ivan-nginx commented Dec 12, 2018 •

edited

Loading

maple3142 commented Dec 12, 2018

ivan-nginx commented Dec 12, 2018

ivan-nginx commented Dec 12, 2018 •

edited

Loading

maple3142 commented Dec 13, 2018

jiangtj commented Dec 13, 2018

ivan-nginx commented Dec 14, 2018

stevenjoezhang commented Dec 27, 2018 •

edited

Loading

stevenjoezhang commented Dec 29, 2018

ivan-nginx commented Dec 29, 2018

stevenjoezhang commented Dec 29, 2018 •

edited

Loading

ivan-nginx commented Dec 29, 2018

JOduMonT commented Feb 26, 2019

1v9 commented Mar 16, 2019

Aqua-Dream commented Feb 7, 2020

jiangtj commented Mar 17, 2020

stevenjoezhang commented Mar 17, 2020 •

edited

Loading

jiangtj commented Mar 17, 2020 •

edited by unfurl-links bot

Loading

stevenjoezhang commented Mar 29, 2020 •

edited

Loading

FontAwesome icon issue | FontAwesome 图标问题 #505

FontAwesome icon issue | FontAwesome 图标问题 #505

Comments

ivan-nginx commented Dec 12, 2018 • edited by stevenjoezhang Loading

maple3142 commented Dec 12, 2018

ivan-nginx commented Dec 12, 2018 • edited Loading

maple3142 commented Dec 12, 2018

ivan-nginx commented Dec 12, 2018

ivan-nginx commented Dec 12, 2018 • edited Loading

maple3142 commented Dec 13, 2018

jiangtj commented Dec 13, 2018

ivan-nginx commented Dec 14, 2018

stevenjoezhang commented Dec 27, 2018 • edited Loading

stevenjoezhang commented Dec 29, 2018

ivan-nginx commented Dec 29, 2018

stevenjoezhang commented Dec 29, 2018 • edited Loading

ivan-nginx commented Dec 29, 2018

JOduMonT commented Feb 26, 2019

1v9 commented Mar 16, 2019

Aqua-Dream commented Feb 7, 2020

jiangtj commented Mar 17, 2020

stevenjoezhang commented Mar 17, 2020 • edited Loading

jiangtj commented Mar 17, 2020 • edited by unfurl-links bot Loading

stevenjoezhang commented Mar 29, 2020 • edited Loading

ivan-nginx commented Dec 12, 2018 •

edited by stevenjoezhang

Loading

ivan-nginx commented Dec 12, 2018 •

edited

Loading

ivan-nginx commented Dec 12, 2018 •

edited

Loading

stevenjoezhang commented Dec 27, 2018 •

edited

Loading

stevenjoezhang commented Dec 29, 2018 •

edited

Loading

stevenjoezhang commented Mar 17, 2020 •

edited

Loading

jiangtj commented Mar 17, 2020 •

edited by unfurl-links bot

Loading

stevenjoezhang commented Mar 29, 2020 •

edited

Loading