WPF中使用FontAwesome圖標(biāo)字體

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

VS2015下效果圖

1. 下載FontAwesome圖標(biāo)字體文件

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

壓縮包解壓內(nèi)容

2. 創(chuàng)建WPF項(xiàng)目

打開我們的VS開發(fā)工具,創(chuàng)建一個空白的WPF項(xiàng)目,并創(chuàng)建一個名為Resources的文件夾。


創(chuàng)建Resources的文件夾

3. 拷貝字體文件

點(diǎn)擊進(jìn)入壓縮包的font文件夾,復(fù)制 fontawesome-webfont.ttf #文件到我們WPF項(xiàng)目下的Resources文件夾中。并設(shè)置fontawesome-webfont.ttf文件的復(fù)制到輸出目錄屬性為如果較新則復(fù)制

復(fù)制字體文件并設(shè)置屬性

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>
            <!--自定義樣式-結(jié)束-->
        </ResourceDictionary>
    </Application.Resources>        ```
整個App.xaml文件內(nèi)容如下圖

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

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

Text屬性對應(yīng)的就是圖標(biāo)的值內(nèi)容,具體每個圖標(biāo)對應(yīng)的值,[點(diǎn)擊這里參考](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)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容