none
Migrating from 8.1 to 10: Segoe Symbol font? RRS feed

  • Question

  • I am migrating my 8.1 Universal app to a Windows 10 Universal app. A number of UI elements are way off - including the use of the Segoe symbol. I have my app use the ui-dark.css file that is generated by one of the new Windows 10 Universal App templates. 

    The CSS file refers to the font like so:

    @font-face {
      font-family: "Segoe UI Command";
      src: local("Segoe MDL2 Assets");
      font-weight: normal;
      font-style: normal;
    }

    One of the symbols that is not being displayed properly is a play button. Here is the html that is written on the page

    <span tabindex="-1" class="win-commandimage win-commandglyph" aria-hidden="true"></span>

    This HTML is autogenerated because I use the following AppBarCommand winControl.

    <button id="playButton" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdPlay', icon:'play'}" type="button"></button>

    What do I need to do to fix this and have the play button appear correctly?

    Friday, March 25, 2016 5:33 PM

Answers

  • Hello Jaxim,

    Please check the Feed Reader Sample It uses the appbar command. 

    I checked in the sample and changed the refresh icon with play icon and it works fine. 

       <div id="appbar" data-win-control="WinJS.UI.AppBar">
            <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{
                    id: &apos;refreshContentCmd&apos;,
                    label: &apos;Refresh&apos;,
                    icon: &apos;play&apos;,
                    section: &apos;global&apos;,
                    tooltip: &apos;Refresh content&apos;}" class="win-button"></button>
        </div>

    At runtime you can see that it correctly shows the play button. 

    Please check the Guidelines for Segoe MDL2 icons

    Try U+E768 code for play symbol. 

    With Regards,

    Krunal Parekh 


    Thanks MSDN Community Support Please remember to Mark as Answer the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Proposed as answer by Krunal Parekh Monday, April 4, 2016 10:00 AM
    • Marked as answer by Krunal Parekh Thursday, April 7, 2016 3:27 AM
    Tuesday, March 29, 2016 7:00 AM