Use only the used Font Awesome icons. #5530

XhmikosR · 2016-11-02T22:12:59Z

The font is generated with https://icomoon.io/app/.

This saves ~50KB.

A couple of questions:

Is IE < 9 still supported? If not we could skip .eot.
Do you want the json file from the IcoMoon app committed too?

pathawks · 2016-11-02T22:30:46Z

docs/_sass/_font-awesome.scss

+  src: url('../fonts/FontAwesome.eot?9h6hxj#iefix') format('embedded-opentype'),
+    url('../fonts/FontAwesome.ttf?9h6hxj') format('truetype'),
+    url('../fonts/FontAwesome.woff?9h6hxj') format('woff'),
+    url('../fonts/FontAwesome.svg?9h6hxj#FontAwesome') format('svg');


WOFF is supported by 92% of browsers. What users are you targeting with all these new files?

I suggest that you read about the bulletproof fontface.

You mean this post from more than 7 years ago?

Yes. And you need to understand I don't make this by hand. This is how it was, this is how it was generated.

You want something else, make a new issue.

I thought SVG icons were the way to go now. :/

XhmikosR · 2016-11-02T23:11:44Z

Again guys that's a different issue. I simply made this pull request to
reduce the font size. Everything else is for a separate PR which I have no
time to submit myself.

On Nov 3, 2016 01:09, "Frank Taillandier" notifications@github.com wrote:

@DirtyF commented on this pull request.

In docs/_sass/_font-awesome.scss
#5530:

@font-face {
font-family: 'FontAwesome';

src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');

src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');

src: url('../fonts/FontAwesome.eot?9h6hxj');

src: url('../fonts/FontAwesome.eot?9h6hxj#iefix') format('embedded-opentype'),

url('../fonts/FontAwesome.ttf?9h6hxj') format('truetype'),

url('../fonts/FontAwesome.woff?9h6hxj') format('woff'),

url('../fonts/FontAwesome.svg?9h6hxj#FontAwesome') format('svg');

I thought SVG icons were the way to go
https://github.com/blog/2112-delivering-octicons-with-svg now.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#5530, or mute the thread
https://github.com/notifications/unsubscribe-auth/AAVVtacsoiBZMe0R7ib9R306njmk83tWks5q6RgwgaJpZM4Knz1a
.

DirtyF · 2016-11-02T23:13:37Z

@XhmikosR I hear you, thanks for pointing that this could be improved, wasn''t aware of this before your PR.

pathawks · 2016-11-02T23:35:58Z

@XhmikosR Reducing file size is certainly a good thing, and I am all 👍 on that.

The fact remains, however, that this PR is adding three additional font formats to the CSS, and that is something that cannot be done without good reason. I'm not saying it mustn't be done; I’' only saying that the motivation is unclear to me.

DirtyF · 2016-11-03T02:11:22Z

@pathawks yeah, I find it too bad that better compressed woff2 has gone 😕

XhmikosR · 2016-11-03T07:41:36Z

@pathawks: where on earth do you see this PR is adding 3 new formats? Please don't spread BS.

XhmikosR · 2016-11-03T07:42:30Z

And seriously, I have no interest on discussing this except for the points I make on my OP.

@parkr: please have a look and cmerge or close.

pathawks · 2016-11-03T07:56:35Z

@XhmikosR Previously _font-awesome.scss had only EOT. This PR adds TTF, WOFF, and SVG. I am only discussing the changes you have proposed in this PR. If this change was a mistake, it should be fixed. If I am misunderstanding this change, I would like an explanation.

I am not trying to be difficult, only trying to understand the implications of this PR.

XhmikosR · 2016-11-03T08:06:33Z

No it does not have only eot. Scroll to the right.

pathawks · 2016-11-03T08:14:32Z

That’s what I was missing! So sorry for the confusion.

XhmikosR · 2016-11-03T08:16:03Z

Yeah, that is my whole point of asking if IE < 9 is supported ;) If not, I could skip .eot.

parkr · 2016-11-03T16:24:43Z

Use only the used Font Awesome icons

If we want to use another icon, we have to regenerate this, right? How do you feel about the trade-off between saving KB and adding development time? Not sure how frequently we use new icons.

Is IE < 9 still supported? If not we could skip .eot.

I don't believe IE < 9 is supported, no. If it doesn't add any bandwidth to the request for IE > 9, Safari, Firefox, and Chrome, then I'd be fine leaving it in as it sounds like we had .eot before this PR.

Do you want the json file from the IcoMoon app committed too?

What is this JSON file? Can you paste in a gist and paste the link in a reply here? How does IcoMoon play in? Maybe we need documentation in the CSS about how to updated FontAwesome icons – I have no idea what IcoMoon is and how to use it.

XhmikosR · 2016-11-03T16:28:40Z

The json file is what you feed to the app to generate the font without
doing everything from scratch.

Generally this is a fine solution IMO. JUST LOAD THE JSON file, choose the
icons you want and you are done.

On Nov 3, 2016 18:25, "Parker Moore" notifications@github.com wrote:

Use only the used Font Awesome icons

If we want to use another icon, we have to regenerate this, right? How do
you feel about the trade-off between saving KB and adding development time?
Not sure how frequently we even need to add

Is IE < 9 still supported? If not we could skip .eot.

I don't believe IE < 9 is supported, no. If it doesn't add any bandwidth
to the request for IE > 9, Safari, Firefox, and Chrome, then I'd be fine
leaving it in as it sounds like we had .eot before this PR.

Do you want the json file from the IcoMoon app committed too?

What is this JSON file? Can you paste in a gist and paste the link in a
reply here? How does IcoMoon play in? Maybe we need documentation in the
CSS about how to updated FontAwesome icons – I have no idea what IcoMoon is
and how to use it.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#5530 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAVVtQU3HWwYjRMHxUoNzS6BNAYy7VfEks5q6gr0gaJpZM4Knz1a
.

DirtyF · 2016-11-09T00:52:38Z

Saving 50kb is not the right measurement here IMHO.

Since this PR is intended to address performance issues, I just ran a test on webpagetest of the current loading on mobile. Chrome loads woff2 format by default as all other modern browsers do except IE.

@XhmikosR have you ran some tests that shows that rendering is faster with this PR?

XhmikosR · 2016-11-09T00:54:57Z

Of course it's faster. And in the worst case it simply saves 59 kb of crap
that are not used so it saves bandwidth.

On Nov 9, 2016 02:53, "Frank Taillandier" notifications@github.com wrote:

Saving 50kb is not the right measurement here IMHO.

Since this PR is intended to address performance issues, I just ran a test
on webpagetest
https://www.webpagetest.org/result/161109_1S_186/2/details/#waterfall_view_step1
of the current loading on mobile. Chrome load woff2 format by default as
all other modern browsers do except IE.

@XhmikosR https://github.com/XhmikosR have you ran some tests that
shows that rendering is faster with this PR?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#5530 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAVVtQnLYsOXDXGTdzkrQz_7fQAT5rk-ks5q8RlpgaJpZM4Knz1a
.

DirtyF · 2016-11-09T00:56:21Z

My point here is that it seems to be more important to keep woff2 format for a majority of browsers, and that this will assure browsers download the lighter format.

XhmikosR · 2016-11-09T00:57:21Z

Your point is moot. It's not lighter.

On Nov 9, 2016 02:56, "Frank Taillandier" notifications@github.com wrote:

My point here it's that it seems to it's more important to keep woff2
format for a majority of browsers, and that this will assure browsers
download the lighter format.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#5530 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAVVtTJvXDIyKAXFTUJiWtlEMs_w5XaMks5q8RpGgaJpZM4Knz1a
.

parkr · 2016-11-09T00:59:28Z

Thanks for the PR @XhmikosR. I'd be happy to accept it if you are willing to write a quick README or comment in the generated file which explains how to modify the file. If there is configuration required, then let's commit that here (or put it in the README) as well so that isn't lost for future folks.

XhmikosR · 2016-11-11T00:35:23Z

@parkr: where do you want me to place the info? I can upload the json file in the fonts folder or do you have something else in mind?

parkr · 2016-11-29T05:28:25Z

@parkr: where do you want me to place the info? I can upload the json file in the fonts folder or do you have something else in mind?

JSON file in the fonts folder would work, or make a README with instructions. I don't even know how to update this! A README with instructions would be lovely.

XhmikosR · 2016-11-29T08:35:34Z

@parkr: can you check if now everything is as you want?

The font is generated with https://icomoon.io/app/. This saves ~50KB.

parkr · 2016-11-29T22:37:22Z

AppVeyor failed because the fmt test timed out. No clue why that would happen as I don't know the nuances of bash on AppVeyor Windows.

parkr · 2016-11-29T22:37:31Z

@jekyllbot: merge +site

parkr · 2016-11-29T22:43:19Z

Thanks for sticking with this, @XhmikosR! Hooray for saving bandwidth and reducing page size. 👏

pathawks reviewed Nov 2, 2016

View reviewed changes

parkr added the pending-feedback We are waiting for more info. label Nov 10, 2016

jekyllbot removed the pending-feedback We are waiting for more info. label Nov 11, 2016

Use only the used Font Awesome icons.

dc4e77c

The font is generated with https://icomoon.io/app/. This saves ~50KB.

parkr approved these changes Nov 29, 2016

View reviewed changes

jekyllbot merged commit 293b6f1 into jekyll:master Nov 29, 2016

jekyllbot added the documentation label Nov 29, 2016

jekyllbot added a commit that referenced this pull request Nov 29, 2016

Update history to reflect merge of #5530 [ci skip]

0107341

XhmikosR mentioned this pull request Dec 1, 2016

Update _font-awesome.scss #5614

Merged

parkr pushed a commit that referenced this pull request Dec 16, 2016

Update history to reflect merge of #5530 [ci skip]

2aed2f4

jekyll locked and limited conversation to collaborators Jul 11, 2019

jekyllbot added the frozen-due-to-age label Jul 11, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use only the used Font Awesome icons. #5530

Use only the used Font Awesome icons. #5530

XhmikosR commented Nov 2, 2016

pathawks Nov 2, 2016

XhmikosR Nov 2, 2016

pathawks Nov 2, 2016

XhmikosR Nov 2, 2016

DirtyF Nov 2, 2016 •

edited

Loading

XhmikosR commented Nov 2, 2016

@DirtyF commented on this pull request.

DirtyF commented Nov 2, 2016

pathawks commented Nov 2, 2016

DirtyF commented Nov 3, 2016 •

edited

Loading

XhmikosR commented Nov 3, 2016

XhmikosR commented Nov 3, 2016

pathawks commented Nov 3, 2016

XhmikosR commented Nov 3, 2016

pathawks commented Nov 3, 2016

XhmikosR commented Nov 3, 2016

parkr commented Nov 3, 2016 •

edited

Loading

XhmikosR commented Nov 3, 2016

DirtyF commented Nov 9, 2016 •

edited

Loading

XhmikosR commented Nov 9, 2016

DirtyF commented Nov 9, 2016 •

edited

Loading

XhmikosR commented Nov 9, 2016

parkr commented Nov 9, 2016

XhmikosR commented Nov 11, 2016

parkr commented Nov 29, 2016

XhmikosR commented Nov 29, 2016

parkr commented Nov 29, 2016

parkr commented Nov 29, 2016

parkr commented Nov 29, 2016

Use only the used Font Awesome icons. #5530

Use only the used Font Awesome icons. #5530

Conversation

XhmikosR commented Nov 2, 2016

pathawks Nov 2, 2016

Choose a reason for hiding this comment

XhmikosR Nov 2, 2016

Choose a reason for hiding this comment

pathawks Nov 2, 2016

Choose a reason for hiding this comment

XhmikosR Nov 2, 2016

Choose a reason for hiding this comment

DirtyF Nov 2, 2016 • edited Loading

Choose a reason for hiding this comment

XhmikosR commented Nov 2, 2016

@DirtyF commented on this pull request.

DirtyF commented Nov 2, 2016

pathawks commented Nov 2, 2016

DirtyF commented Nov 3, 2016 • edited Loading

XhmikosR commented Nov 3, 2016

XhmikosR commented Nov 3, 2016

pathawks commented Nov 3, 2016

XhmikosR commented Nov 3, 2016

pathawks commented Nov 3, 2016

XhmikosR commented Nov 3, 2016

parkr commented Nov 3, 2016 • edited Loading

XhmikosR commented Nov 3, 2016

DirtyF commented Nov 9, 2016 • edited Loading

XhmikosR commented Nov 9, 2016

DirtyF commented Nov 9, 2016 • edited Loading

XhmikosR commented Nov 9, 2016

parkr commented Nov 9, 2016

XhmikosR commented Nov 11, 2016

parkr commented Nov 29, 2016

XhmikosR commented Nov 29, 2016

parkr commented Nov 29, 2016

parkr commented Nov 29, 2016

parkr commented Nov 29, 2016

DirtyF Nov 2, 2016 •

edited

Loading

DirtyF commented Nov 3, 2016 •

edited

Loading

parkr commented Nov 3, 2016 •

edited

Loading

DirtyF commented Nov 9, 2016 •

edited

Loading

DirtyF commented Nov 9, 2016 •

edited

Loading