Skip to content
This repository has been archived by the owner on Jul 22, 2023. It is now read-only.

Segoe MDL2 Icons cross platform app #1

Closed
alexbatis opened this issue Sep 26, 2018 · 17 comments · Fixed by #16
Closed

Segoe MDL2 Icons cross platform app #1

alexbatis opened this issue Sep 26, 2018 · 17 comments · Fixed by #16
Labels
enhancement New feature or request

Comments

@alexbatis
Copy link

Great job on the tutorial, the steps are clear and the final look is great!

In regards to the maximize, minimize, restore, and close buttons in the title bar, they use the Segoe MDL2 Icons. This works perfectly for apps on Windows 10, but on older versions of Windows or Mac, the user has to install the font on their system.

From Microsoft

How do I get this font?
On Windows 10: There's nothing you need to do, the font comes with Windows.
On a Mac, you need to download and install the font: Get the Segoe UI and MDL2 icon fonts

For example, a screenshot from running on Windows 7

image

As electron is useful for developing cross platform apps, it would be most ideal if the user didnt have to install a font package to see these icons. Is there any way to include these icons in a cross platform electron project? For example, I found this repo that provides the icons as a .css file, but unfortunately it doesnt contain the icons referenced in the tutorial.

@binaryfunt
Copy link
Owner

I'm glad you liked the tutorial!

Unfortunately I don't know how to do that, and cross-platform compatibility is something that I have yet to learn in Electron. If I get to that stage I will update the tutorial, but can't guarantee anything anytime soon. If you figure out how to do it, by all means fork the tutorial/pull request

@digimezzo
Copy link

digimezzo commented Oct 13, 2018

I got it working in a cross platform way:

  • Copy SegMDL2.ttf in the assets/font/ folder in your project
  • Create a font-face in css:
@font-face {
  font-family: segoe;
  src: url(assets/font/SegMDL2.ttf);
}
  • Use the font-face in the #window-controls .button class:
#window-controls .button {
  grid-row: 1 / span 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  user-select: none;
  cursor: default;
  opacity: 0.8;
  font-family: segoe; 
}

@binaryfunt binaryfunt added enhancement New feature or request and removed enhancement New feature or request labels Mar 12, 2019
@Toby56
Copy link
Contributor

Toby56 commented Dec 10, 2019

@binaryfunt
Do you actually want this to be done?
If you want this to be macOS compatible then the font file and stuff can be added in easily.
(or you can just have this issue here for reference, or put a note in the readme, with a link to the font files and an example code snippet or something)

@binaryfunt
Copy link
Owner

binaryfunt commented Dec 10, 2019

@Toby56 I'm not able to test the solution above, but I suppose it looks like it should work. When I get some time I can add it in, or feel free to submit a pull request if you want

@binaryfunt binaryfunt added the enhancement New feature or request label Dec 10, 2019
@Toby56
Copy link
Contributor

Toby56 commented Dec 15, 2019

There is a small problem with adding the font files in, the Segoe fonts' license (EULA) says that the fonts can only be used for programs that "run on a Microsoft Platform". I'll make a pr anyway and include the license (because I don't think it really matters), but just bare it in mind.

@Toby56
Copy link
Contributor

Toby56 commented Dec 15, 2019

You may use the Segoe MDL2 Assets and Segoe UI fonts or glyphs included in this file (“Software”) solely to design, develop and test your programs that run on a Microsoft Platform, a Microsoft Platform includes but is not limited to any hardware or software product or service branded by trademark, trade dress, copyright or some other recognized means, as a product or service of Microsoft. This license does not grant you the right to distribute or sublicense all or part of the Software to any third party. By using the Software you agree to these terms. If you do not agree to these terms, do not use the Software.

@Toby56
Copy link
Contributor

Toby56 commented Dec 19, 2019

Sooo this is a no go?

@binaryfunt
Copy link
Owner

@Toby56 Sorry, I'm quite busy at the moment, I'll need some time to consider it.

@digimezzo
Copy link

I've created a Pull request which proposes a solution that is independent of Segoe MDL2 Assets font. the Segoe MDL2 glyphs are replaced by SVG's in that solution. Let me know what you think about this.

This is how it looks like:

image

@Toby56
Copy link
Contributor

Toby56 commented Jan 12, 2020

@digimezzo I personally think SVGs are a good solution and probably better than a font. They still have some problems with hidpi scaling, but that's another problem. Also just a note, the stroke thickness attributes are redundant because they don't have a stroke colour, only a fill.

@binaryfunt
Copy link
Owner

binaryfunt commented Feb 17, 2020

As I've commented in #11, I've recreated the icons as PNGs for 100%, 125%, 150% and 175% scaling using <img> srcset in the branch bitmap-icons. Seems to work better than SVGs for pixel-perfection, feel free to check out and report any problems with it.

@binaryfunt binaryfunt mentioned this issue Feb 24, 2020
@binaryfunt binaryfunt linked a pull request Feb 24, 2020 that will close this issue
@sadeghimahdi
Copy link

Please put the latest version
The latest version is 1.70
Ruined by me

@Toby56
Copy link
Contributor

Toby56 commented Oct 30, 2020

Please put the latest version
The latest version is 1.70
Ruined by me

@sadeghimahdi What???

@sadeghimahdi
Copy link

I wanted the new version of SegMDL2 font

@sadeghimahdi
Copy link

orginal font in windows 10 last version

@sadeghimahdi
Copy link

@sadeghimahdi
Copy link

I found

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants