在WPF應用程序中使用Font Awesome圖標

Font Awesome 在網站開發中，常常用到。今天介紹如何在WPF應用程序中使用Font Awesome 。

若是是自定義的圖標字體，使用方法相同。

下載圖標字體

1. 在官方網站或github上下載資源

   http://fontawesome.io/#modal-download

   https://github.com/FortAwesome/Font-Awesome

2. 解壓下載的文件（我是在github上下載的源碼），咱們要使用的是其中css和fonts文件夾中的內容

在項目中加入字體

• 新建WPF應用，並新建存放字體的文件夾;

• 把下載的fonts文件夾中的fontawesome-webfont.ttf複製到項目中存放字體的文件夾中，並設置其生成操做爲Resource(默認便是);

• 新建資源文件，存放全部圖標相關的資源；

• 加入字體樣式；

首先加入字體的資源

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

而後加入樣式

<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>

處理圖標資源名稱

如今，咱們須要把字體以WPF資源的形式加進來， 咱們須要把CSS中

處理成

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

處理的辦法其實還比多，好比能夠寫個腳本什麼的。 我這裏介紹直接使用替換的方法

• 在VS裏打開font-awesome.css文件。（在下載的css文件夾中）

• 把除下面這種格式的其它CSS樣式刪掉

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

• 使用<system:String x:Key="替換 .

• 使用"> 替換:before {

• 使用&#x 替換content: "\

• 使用; 替換";

• 使用</system:String> 替換}

• 在資源文件中加入 xmlns:system="clr-namespace:System;assembly=mscorlib"

• 把替換後的內容複製到資源文件中，處理報錯的行

如圖中，刪掉2000和2001行

使用

完成上面的操做後，咱們就能夠在應用程序中使用了。

• 在App.xaml文件中，引入資源

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

• 在應用程序中，就能夠用使用資源的方式使用了

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

  能夠經過設置fontsize和foreground來設置圖標的大小和顏色