在WPF中使用FontAwesome图标字体做图标

I am making use of Font Awesome's icons to render basic font images within my C# WPF application. During run-time when I attempt to alter the TextBlock to display a different font icon but the unicode representation is displayed instead of the font icon.

I have created a sample application to display this. When either of the buttons are clicked, it replaces the TextBlock's Text property with the unicode for the respective icon. There is a Resources folder in the project which has the FontAwesome.ttf font file as a Build Resource which the The TextBlock's FontFamily property references.

Here's my sample application's source code:

Code-Behind:

namespace FontAwesomeTest
{
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void btnGlass_Click(object sender, RoutedEventArgs e)
    {
        tblkFontIcon.Text = "";            
    }

    private void btnMusic_Click(object sender, RoutedEventArgs e)
    {
        tblkFontIcon.Text = "";
    }

    private void btnSearch_Click(object sender, RoutedEventArgs e)
    {
        tblkFontIcon.Text = "";
    }        
}
}

XAML:

<Window x:Class="FontAwesomeTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Font Awesome Test Window" Height="300" Width="330" Name="FontAwesomeTestWindow">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="25"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Button Name="btnGlass" Height="35" Width="85" Click="btnGlass_Click" >Glass</Button>
    <Button Name="btnMusic" Grid.Column="1" Height="35" Width="85" Click="btnMusic_Click">Music</Button>
    <Button Name="btnSearch" Grid.Column="2" Width="85" Height="35"  Click="btnSearch_Click">Search</Button>
    <TextBlock Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="18" FontFamily="../Resources/#FontAwesome">&#xf000;</TextBlock>
    <TextBlock Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="18" FontFamily="../Resources/#FontAwesome">&#xf001;</TextBlock>
    <TextBlock Grid.Row="1" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="18" FontFamily="../Resources/#FontAwesome">&#xf002;</TextBlock>
    <TextBlock Name="tblkFontIcon" Grid.Row="2" Grid.ColumnSpan="3" FontSize="64" FontFamily="../Resources/#FontAwesome" HorizontalAlignment="Center" VerticalAlignment="Center">&#xf011;</TextBlock>
</Grid>

I used the following tutorial to incorporate Font Awesome into my application http://www.codeproject.com/Tips/634540/Using-Font-Icons

So in essence, how can I change the Icon but have an Icon display - not Unicode?

Thanks in advance.

You need this code. It would save you from typing unicodes manually: github.com/fzany/Font-Awesome-Cheat-Charp – Olorunfemi Ajibulu Oct 16 '18 at 16:41

 

===============================================================

 

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:

1. Add the Font to your project, let's say you put them in to a folder "fonts"
2. Change the Build Action to Resource not Embedded Resource
3. 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 Textproperty with the supported unicode string.

Try something like

tblkFontIcon.Text = "\uf000";

rather than

tblkFontIcon.Text = "";

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=, 
      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;
}

• Firstly - thanks for the speedy response! The Update you provided is how I am currently using Fonts in my WPF application. As the question states, it currently works but displays Unicode when I change the Text property even if I change it to the same Unicode. I tried to include images of this but don't have enough 'street cred'. As for the Using Font Icons part, I can't figure out how to use it for changing the Icon at Runtime as my need requires. I can get it to work during Design/Build time. 

  – Gareth Apr 16 '14 at 12:37 
•  
  I think you should set the text with a unicode string rather than set it with "". 

  – terry Apr 16 '14 at 13:05
•  
  I've updated, and you could follow that code to change your TextBlock.Text to another unicode string, and that should work. – terry Apr 16 '14 at 13:09
• 1
  tblkFontIcon.Text = "\uf000"; Yup, that solved it! But why?

   – Gareth Apr 16 '14 at 13:14 
• 2
  because "" is an xaml "version" unicode, the xaml parser translates it into the corresponding unicode string which is "\uf000" in c# and set that to the tblkFontIcon.Text.

   – terry Apr 16 '14 at 13:19 

===============================================================

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>

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

And finally in your C# code behind:

using FontAwesome.WPF; //on the top of the code

btnButton.Content = FontAwesomeIcon.LongArrowRight; 

OR

 1 (btnButton.Content as ImageAwesome).Icon = FontAwesomeIcon.LongArrowRight;