Use the Font Awesome icon in the WPF application, wpfawesome

Use the Font Awesome icon in the WPF application, wpfawesome

Font Awesome is often used in website development. Today we will introduce how to use Font Awesome in WPF applications.

Use the same method for custom icon fonts.

Font of the download icon added to the project

• Create a new WPF Application and create a folder that stores fonts;

• Copy the fontawesome-webfont.ttf from the downloaded fonts folder to the folder where the fonts are stored in the project, and set its generation to Resource (which is by default );

• Create a resource file to store all icon-related resources;

• Add a font style;

First, add the Font Resource

<FontFamily x:Key="IconFont">/IconFontSample;component/fonts/fontawesome-webfont.ttf#Fontawesome</FontFamily>

Then add the style

  <Style x:Key="IconStyle" >      <Setter Property="TextElement.FontFamily" Value="{StaticResource IconFont}" />      <Setter Property="Control.OverridesDefaultStyle" Value="True"></Setter>      <Setter Property="Control.UseLayoutRounding" Value="True"></Setter>      <Setter Property="Control.SnapsToDevicePixels" Value="True"></Setter>      <Setter Property="TextBlock.TextAlignment" Value="Center"></Setter>      <Setter Property="TextBlock.VerticalAlignment" Value="Center"></Setter>      <Setter Property="TextElement.FontSize" Value="12"></Setter>  </Style>

Processed icon Resource Name

Now, we need to add the font in the form of a WPF resource.

Processed

    <system:String x:Key="icon-glass">&#xf00c;</system:String>

There are actually many solutions, such as writing a script or something. Here I will introduce how to directly use replacement.

• Open the font-awesome.css file in. (In the downloaded css folder)

• Delete other CSS styles in the following format

  .fa-glass:before { content: "\f000";}

• Use<system:String x:Key="Replace.

• Use">Replace:before {

• Use&#xReplacecontent: "\

• Use;Replace";

• Use</system:String>Replace}

• Add to resource filexmlns:system="clr-namespace:System;assembly=mscorlib"

• Copy the replaced content to the resource file to handle the error line.

Delete rows 2000 and 2001

Use

After completing the above operations, we can use them in the application.

• Introduce Resources in the App. xaml File

  <Application.Resources>       <ResourceDictionary>           <ResourceDictionary.MergedDictionaries>              <ResourceDictionary Source="/IconFontSample;component/fonts/IconFontDictionary.xaml"></ResourceDictionary>           </ResourceDictionary.MergedDictionaries>       </ResourceDictionary>  </Application.Resources>

• In the application, you can use resources.

       <TextBlock Style="{DynamicResource IconStyle}" FontSize="26"                  Text="{DynamicResource fa-recycle}" Foreground="Brown"></TextBlock>

  You can set fontsize and foreground to set the Icon size and color.