WPF中使用FontAwesome圖標字體

如題,我們先看下最終效果圖。

VS2015下效果圖

1. 下載FontAwesome圖標字體文件

大家可以點擊這里下載FontAwesome3.0,下載完成后解壓壓縮包。壓縮包具體內容如下圖。

壓縮包解壓內容

2. 創建WPF項目

打開我們的VS開發工具,創建一個空白的WPF項目,并創建一個名為Resources的文件夾。


創建Resources的文件夾

3. 拷貝字體文件

點擊進入壓縮包的font文件夾,復制 fontawesome-webfont.ttf #文件到我們WPF項目下的Resources文件夾中。并設置fontawesome-webfont.ttf文件的復制到輸出目錄屬性為如果較新則復制

復制字體文件并設置屬性

4. 使用

首先,我們在App.xaml文件中添加如下代碼

        <ResourceDictionary>
            <!--自定義樣式-->
            <Style x:Key="FontAwesome">
                <Setter Property="TextElement.FontFamily" Value="pack://application:,,,/Resources/#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>
            <!--自定義樣式-結束-->
        </ResourceDictionary>
    </Application.Resources>        ```
整個App.xaml文件內容如下圖

![App.xaml文件內容](http://upload-images.jianshu.io/upload_images/2287003-f6aa071709b13b24.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
接下來,我們就可以使用字體圖標了,我們在MainWindow窗體中添加如下代碼

<StackPanel Orientation="Horizontal">
<TextBlock Text="?" Style="{StaticResource FontAwesome}" />
<TextBlock Text="?" Style="{DynamicResource FontAwesome}" />
</StackPanel>

Text屬性對應的就是圖標的值內容,具體每個圖標對應的值,[點擊這里參考](http://www.bootcss.com/p/font-awesome/design.html)
最后我們看看我們的效果

![效果](http://upload-images.jianshu.io/upload_images/2287003-c0f644d3904e2160.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容