RadGlyph with Font Awesome Duotone font

[Neil N]

Can RadGlyph work with Font Awesome's Duotone font? For example, we want to render: https://fontawesome.com/icons/house?f=duotone&s=solid

I've tried various things, including:

                <Grid>
                    <!-- Secondary (back) layer -->
                    <telerik:RadGlyph
                        Font="fads"
                        FontSize="40"
                        Glyph="&#x10F015;"
                        Foreground="Red" />
                    <!-- Primary (front) layer -->
                    <telerik:RadGlyph
                        Font="fads"
                        FontSize="40"
                        Glyph="&#xF015;"
                        Foreground="Blue" />
                </Grid>

This just renders an all blue house.

Reversing the elements:

            <telerik:RadTabItem.Content>
                <Grid>
                    <!-- Primary (front) layer -->
                    <telerik:RadGlyph
                        Font="fads"
                        FontSize="40"
                        Glyph="&#xF015;"
                        Foreground="Blue" />
                    <!-- Secondary (back) layer -->
                    <telerik:RadGlyph
                        Font="fads"
                        FontSize="40"
                        Glyph="&#x10F015;"
                        Foreground="Red" />
                </Grid>

I'm using the same technique I use to register regular Font Awesome fonts and have verified the codepoints exist:

        var solidDuotoneFontFilePath = Path.Combine(directory, "Resources/Fonts", "Font Awesome 7 Duotone-Solid-900.otf");
        var solidDuotoneFontUri = new Uri(solidDuotoneFontFilePath, UriKind.Absolute);
        var solidDuotoneFontFamily = new FontFamily(solidDuotoneFontUri, "./#Font Awesome 7 Duotone Solid");
        RadGlyph.RegisterFont(solidDuotoneFontFamily, "fads");

        bool HasChar(FontFamily fam, int codePoint)
        {
            var tf = new Typeface(fam, FontStyles.Normal, FontWeights.Normal, FontStretches.Normal);
            if (!tf.TryGetGlyphTypeface(out var gtf)) return false;
            return gtf.CharacterToGlyphMap.ContainsKey(codePoint);
        }

        Debug.WriteLine($"Primary F015 present: {HasChar(solidDuotoneFontFamily, 0xF015)}");
        Debug.WriteLine($"Secondary 10F015 present: {HasChar(solidDuotoneFontFamily, 0x10F015)}");

[Martin Ivanov]

Hello Neil,

RadGlyph doesn't have a built-in feature that will automatically display the duotone font. To get the desired behavior you can use two glyphs as you already do. The font register code is also correct.

I've tested this and it seems to work properly on my side with Font Awesome 6. However, it seems that with Font Awesome 7, the glyphs storing structure is different.

What I can suggest is to use the glyph layer names instead of their unicode. For example, the name of the first layer of the house glyph is "house#". The second layer is "house##". You can get the layer names in the Font Awesome website:

Also, you can directly copy the name+# via the following buttons on each glyph's page:

Here is the updated code:

 <Grid>
     <!-- primary layer -->
     <telerik:RadGlyph
             Font="fads"
             FontSize="40"
             Glyph="house#"
             Foreground="Red" />
     <!-- secondary layer -->
     <telerik:RadGlyph
             Font="fads"
             FontSize="40"
             Glyph="house##"
             Foreground="Blue" />
 </Grid>

I hope that helps.

Regards,
Martin Ivanov
Progress Telerik

[Neil N]

Thank you so much!