學習WPF——使用Font-Awesome圖標字體

圖標字體介紹

在介紹圖標字體之前，不得不介紹圖標格式ICON

ICON是一種圖標格式，我們操作系統中各種應用程序都包含一個圖標

比如QQ程序的圖標是一個可愛的企鵝，我的電腦是一個顯示器圖標

----------------

一個圖標文件是擴展名為.ICO或者ICON的文件

直到現在圖標文件還是在計算機程序中隨處可見

但有時候需要在不失真的情況下放大圖標

因為ICON本身與JPEG\PNG格式的圖形文件差異不大，也是非矢量圖形

所以圖標文件就很難滿足這種需求

----------------

為了解決這種問題，就有作者把圖形信息做到字體中去

我們今天要使用的 Font-Awesome就是這種技術形式的一種實現

（當然還有其他辦法解決這種問題，比如用css3繪制圖標，但那種技術形式就比較難應用於客戶端程序中了）

----------------

常見的圖標字體有 很多，但我認為Font-Awesome是迄今為止最出色的圖標字體（沒有之一）

圖標多、圖標美觀、兼容各種應用場景是其最主要的有點

 

WPF中使用Font-Awesome圖標字體

我曾經 在Qt應用程序中使用過 Font-Awesome圖標字體，用起來非常方便，展現效果也一如預期

但在WPF應用程序中使用圖標字體就會顯示成一個方框，如下圖

后來，才找到解決辦法：

首先到Font-Awesome官方網站下載字體程序

下載到的壓縮包，解壓后獲得圖標字體文件

然后把字體文件拷貝到項目中

並設置“復制到輸出目錄”為“如果較新則復制”

然后編輯程序代碼：

<Window x:Class="WpfApplication1.MainWindow"  
xmlns=" http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml"  
Title="MainWindow">  

<Window.Resources>  

<Style x:Key="FontAwesome">

<Setter Property="TextElement.FontFamily" Value="pack://application:,,,/#FontAwesome" />

<Setter Property="TextBlock.Width" Value="100"></Setter>

<Setter Property="TextBlock.Height" Value="100"></Setter>

<Setter Property="TextBlock.TextAlignment" Value="Center"></Setter>

<Setter Property="TextBlock.FontSize" Value="60"></Setter>

<Setter Property="TextBlock.Foreground" Value="Green"></Setter>

</Style>

</Window.Resources>  

<WrapPanel Margin="12">  

<TextBlock Text="&#xf01a;" Style="{DynamicResource FontAwesome}" />

<TextBlock Text=" &#xf01a;" Style="{DynamicResource FontAwesome}" />

<TextBlock Text=" &#xf01a;" Style="{DynamicResource FontAwesome}" />

<TextBlock Text=" &#xf01a;" Style="{DynamicResource FontAwesome}" />

<TextBlock Text=" &#xf01a;" Style="{DynamicResource FontAwesome}" />

<TextBlock Text=" &#xf01a;" Style="{DynamicResource FontAwesome}" />

<TextBlock Text=" &#xf01a;" Style="{DynamicResource FontAwesome}" />

<TextBlock Text=" &#xf01a;" Style="{DynamicResource FontAwesome}" />

<TextBlock Text=" &#xf01a;" Style="{DynamicResource FontAwesome}" />

<TextBlock Text=" &#xf01a;" Style="{DynamicResource FontAwesome}" />

</WrapPanel>  
</Window>

運行程序，看到圖標，大功告成

 

 

修改記錄

2015-12-26：編寫樣例程序，完成部分文章內容

2014-12-29：修改部分內容，修改文檔格式

 

參考資料

add-icon-font-in-wpf

changing-font-icon-in-wpf-using-font-awesome