locked
A Request for an Example of Using an Emoji Symbol on a Button Face

    Question

  • Could someone please provide an example of how to apply an Emoji character as the content in a Windows 8.1 Store app button. Nothing that I've tried has worked.
    Sunday, October 19, 2014 6:50 PM

Answers

  • For a colour font you'll need to set the IsColorFontEnabled property to true:

            <Button>
                <TextBlock Text="&#x1F3B6;" FontFamily="Segoe UI Emoji" IsColorFontEnabled="True"/>
            </Button> 

    If you use an AppBarIcon then IsColorFontEnabled will be set by default:

    <AppBarButton>
                <AppBarButton.Icon>
                    <FontIcon FontFamily="Segoe UI Emoji" Glyph="&#x1F3B6;"/>
                </AppBarButton.Icon>
            </AppBarButton>

    You won't get a live calendar from a font. You'll need to build that yourself from components. Depending on what you want to look like it you can probably use a TextBlock for each of the day and month components.

    Wednesday, October 22, 2014 9:26 PM
    Moderator
  • No. This is a new feature for Windows 8.1.

    Windows Store apps for Windows 8 do not support colour fonts

    Thursday, October 23, 2014 1:16 PM
    Moderator

All replies

  • This will show 3 musical notes in a button:

    <Button Content="&#x1F3B6;" FontFamily="Segoe UI Emoji" />

    BabelMap is a good app for looking at the contents of the "Segoe UI Emoji" font family (see the "Miscellaneous Symbols and Pictographs" Unicode block for the most interesting Emoji characters).

    Sunday, October 19, 2014 10:19 PM
  • Thanks. However, when I substitute in the codes for a calendar I don't see the color image--just the black and white (or gray) image. The codes I tried are

    HTML Entity (decimal) &#128197;
    HTML Entity (hex)

    &#x1f4c5;

    Am I missing something? Is there some other styling to apply? And for a calendar icon, is there more to do so that the image always shows the current date. I suspect that the contents have to link to an external source, correct?

    Monday, October 20, 2014 4:16 AM
  • You might have picked a code that doesn't have a colored version.

    Try this. Should be red container of yellow/orange french fries.

        <Button Content="&#x1f35f;" FontFamily="Segoe UI Emoji" FontSize="50" />

    Monday, October 20, 2014 9:56 PM
  • For a colour font you'll need to set the IsColorFontEnabled property to true:

            <Button>
                <TextBlock Text="&#x1F3B6;" FontFamily="Segoe UI Emoji" IsColorFontEnabled="True"/>
            </Button> 

    If you use an AppBarIcon then IsColorFontEnabled will be set by default:

    <AppBarButton>
                <AppBarButton.Icon>
                    <FontIcon FontFamily="Segoe UI Emoji" Glyph="&#x1F3B6;"/>
                </AppBarButton.Icon>
            </AppBarButton>

    You won't get a live calendar from a font. You'll need to build that yourself from components. Depending on what you want to look like it you can probably use a TextBlock for each of the day and month components.

    Wednesday, October 22, 2014 9:26 PM
    Moderator
  • TextBlocks in Windows 8 Store apps do not have the IsColorFontEnabled property. Is there anything else that can be done to easily apply the colors seen in an Emoji icon?
    Thursday, October 23, 2014 10:07 AM
  • No. This is a new feature for Windows 8.1.

    Windows Store apps for Windows 8 do not support colour fonts

    Thursday, October 23, 2014 1:16 PM
    Moderator
  • This feature is not available in Windows 8.1 Store apps either, correct?
    Monday, October 27, 2014 6:38 PM
  • It is a Windows.UI.Xaml feature for Windows 8.1 Store apps.
    Monday, October 27, 2014 7:05 PM
    Moderator