Question : Do you plan to create a WebFont ? about fluentui-system-icons

[willhou]

@sebbouez We don't have plans for icon font yet, but it's something we have kept under our radar.

[massijay]

Icon Font would be the easiest way to use these icons in every platform (it would also solve #15). Please consider it!

[spencer-nelson]

You are correct in that the scaling of the pictographs is one of the biggest difficulty factors behind the adaptation of this into a font file. This is particularly the case because each one is hand crafted for the given size that it is used. This can be seen by comparing the different sizes of InPrivate Account or Keyboard. With that we are working on a couple of options for how to best offer scalability, particularly how to enable designers to more readily create them at different sizes while still adhering to the principles behind the icon set.

Along the idea of a community contribution of a script to automate the generation of a font file from the assets directory, akin to what the iOS and Android libraries do in preparing libraries that are easily usable in engineering products, we welcome and encourage contributions that solve these problems for whatever platform you are working on. Please feel welcome to fork the repo and create a PR to get your functionality included.

[mxrsoon]

I've made a Node.js script to generate the font files for all icons in the assets folder that have a 24dp variant. The generated font file can be used with ligatures, so the "Duo Status Bar" can be used by just writing "duo_status_bar" using the font.

Can I contribute with the script?

Edit: I'm adding only icons that have a 24dp variant to the font because almost all icons have it, and I'm afraid to use a fallback strategy to grab another variant because that would probably lead to inconsistent scaling.

[mdtauk]

The MDL2 Icon font, uses 16px as its base grid scaling - there should probably be a few fonts at 12, 16, 20, 24, etc scales - so the flexibility of the Fluent Icon framework is not lost.

Its not as typographic as Apple's SF Symbols fonts (which support various weights for each icon) but it is more flexible than MDL2's 16px only icons.

[GurliGebis]

@GurliGebis yeah we could update the script to output the CSS if that brings more convenience.

Most certianly would make it easier to use 👍

[mdtauk]

@mdtauk I agree.
But, for now, not every icon is available in the same scales. Some icons have only a 24dp variant, while some other icons have only a 20dp variant and so on. To generate a font face with all the icons, there should be consistency in scaling, if not, it would be hard to tell which icon is available at which scale.

Font Naming is the consideration for now then.

Fluent Icons 16 and Fluent Icons 24 etc - so the correct version will be chosen to match the 100% scale factor

[aakash1313]

@sebbouez : The WebFonts are now included. Please feel free to check that :)

[GurliGebis]

Correct me if I'm wrong, but shouldn't there be a stylesheet mapping the characters to css classes?

[mxrsoon]

Correct me if I'm wrong, but shouldn't there be a stylesheet mapping the characters to css classes?

It would be nice if at least the font had support for font ligatures. Take a look at my repo (wazybr/fluentui-system-icons-font) to see how it works. It's much more convenient than using arbitrary character codes.

[willhou]

@GurliGebis yeah we could update the script to output the CSS if that brings more convenience.

[mxrsoon]

@mdtauk I agree.
But, for now, not every icon is available in the same scales. Some icons have only a 24dp variant, while some other icons have only a 20dp variant and so on. To generate a font face with all the icons, there should be consistency in scaling, if not, it would be hard to tell which icon is available at which scale.

[mpkelly]

@wazybr would you mind hosting your generated font in a git repo so it can be served by jsdelivr?

[EnnoxHD]

Take a look at https://github.com/EnnoxHD/fluentui-system-icons-font for some manually created fonts.

[mxrsoon]

@EnnoxHD Thanks!
@mpkelly I'm setting up a repository with a script to generate the font and the current font files. I will tag you here when it's done.

[mxrsoon]

Hey, @mpkelly. Take a look at wazybr/fluentui-system-icons-font.
I now added CSS generation to the script, and jsDelivr usage to the README.

[mpkelly]

@wazybr thanks a lot. That's fantastic!

@willhou would you be happy to include a link somewhere in your read me to @wazybr 's font repo?

[GurliGebis]

Correct me if I'm wrong, but shouldn't there be a stylesheet mapping the characters to css classes?

It would be nice if at least the font had support for font ligatures. Take a look at my repo (wazybr/fluentui-system-icons-font) to see how it works. It's much more convenient than using arbitrary character codes.

Would you be able to rework your implementation so it can be merged into this repo? 🙂

[mxrsoon]

Correct me if I'm wrong, but shouldn't there be a stylesheet mapping the characters to css classes?

It would be nice if at least the font had support for font ligatures. Take a look at my repo (wazybr/fluentui-system-icons-font) to see how it works. It's much more convenient than using arbitrary character codes.

Would you be able to rework your implementation so it can be merged into this repo? 🙂

I'm isolated and on vacation, away from any computer except my smartphone for now. But as soon as I get home, I'll check this issue to see if it's still needed.