Changing Font Icon in WPF using Font Awesome

Question 1

UPDATE

I found a different post for this topic -- Add Icon font in wpf I think this should be more likely to what you want.

Make sure your font is added as a resource. Then, use the following string:
<Setter Property="TextElement.FontFamily" Value="pack://application:,,,/fonts/#FontAwesome" />
In the string above, I'm assuming that the font's name (not the font's filename) is FontAwesome.

You just need to:

Add the Font to your project, let's say you put them in to a folder "fonts"
Change the Build Action to Resource not Embedded Resource
Add your style to set the font family like the code snip above, and set the TextBlock.Text to the icon you like and apply the style to the TextBlock.

If you want change the icon by updating the TextBlock.Text property, you should set the Text property with the supported unicode string.

Try something like

 tblkFontIcon.Text = "\uf000";

rather than

tblkFontIcon.Text = "&#xf000;";

If your're using the code from Using Font Icons

then you probably missed the "How It Works" section in that post. You should use that markup extension, rather than using the TextBlock.Text property.

In his sample code:

<RibbonButton Label="Import data" 
  LargeImageSource="{WpfTools:ImageFromFont Text=&#xf01a;, 
  FontFamily=/RibbonFontIconSample;component/Resources/#FontAwesome, Brush=Brown}" />

pay attention to the WpfTools:ImageFromFont, it is the Markup Extention, it allows xaml parser to convert the

{WpfTools:ImageFromFont Text=&#xf01a;, 
      FontFamily=/RibbonFontIconSample;component/Resources/#FontAwesome, Brush=Brown}

to an ImageSource and assigned to the LargeImageSource property.

So in your xaml, you could replace the TextBlock with an Image, then it should be something like:

<Image Source="{WpfTools:ImageFromFont Text=&#xf000;, 
      FontFamily=/RibbonFontIconSample;component/Resources/#FontAwesome, Brush=Brown}" />

If you want to change the Icon, you will have to change the ImageSource yourself, just follow the Using Font Icons to create your own method, or simply copy the following code from that tutorial.

private static ImageSource CreateGlyph(string text, 
        FontFamily fontFamily, FontStyle fontStyle, FontWeight fontWeight, 
        FontStretch fontStretch, Brush foreBrush)
{
    if (fontFamily != null && !String.IsNullOrEmpty(text))
    {
        Typeface typeface = new Typeface(fontFamily, fontStyle, fontWeight, fontStretch);
        GlyphTypeface glyphTypeface;
        if (!typeface.TryGetGlyphTypeface(out glyphTypeface))
                throw new InvalidOperationException("No glyphtypeface found");

        ushort[] glyphIndexes = new ushort[text.Length];
        double[] advanceWidths = new double[text.Length];
        for (int n = 0; n < text.Length; n++)
        {
            ushort glyphIndex = glyphTypeface.CharacterToGlyphMap[text[n]];
            glyphIndexes[n] = glyphIndex;
            double width = glyphTypeface.AdvanceWidths[glyphIndex] * 1.0;
            advanceWidths[n] = width;
        }

        GlyphRun gr = new GlyphRun(glyphTypeface, 0, false, 1.0, glyphIndexes,
                                    new Point(0, 0), advanceWidths, 
                                    null, null, null, null, null, null);
        GlyphRunDrawing glyphRunDrawing = new GlyphRunDrawing(foreBrush, gr);
        return new DrawingImage(glyphRunDrawing);

    }
    return null;
}

Question 2

Font Awesome has NuGet packages named FontAwesome.UWP and FontAwesome.WPF. Just download one of this.

If you will use a icon import follow namespace into your XAML code:

xmlns:fa="http://schemas.fontawesome.io/icons/"

Use it into your button like this:

<Button x:Name="btnButton">
    <Button.Content>
        <fa:ImageAwesome Icon="LongArrowLeft"/>
    </Button.Content>
</Button>

And finally in your C# code behind:

using FontAwesome.WPF; // on the top of the code
btnButton.Content = FontAwesomeIcon.LongArrowRight;

Question 3

Simple and very easy:

You should install fontawesome font on your system use it as follows

<Button Content="&#xf0e4;" FontFamily="FontAwesome" FontSize="32" />

How to compose icon, {&#x}{FontAwesome icon code} e.g &#xf2b9 for address book

To find the list of codes goto FontAwesome or astronaut web