WPF使用矢量字體圖標(阿里巴巴iconfont)

原文: WPF使用矢量字體圖標(阿里巴巴iconfont)

版權聲明:本文爲博主原創文章,轉載請註明出處。 https://blog.csdn.net/lwwl12/article/details/78606747

經常使用的矢量字體圖標:阿里巴巴iconfont,FontAwesome;今天介紹如何在wpf中使用阿里巴巴iconfont矢量圖標。其餘矢量圖標也是相似的使用方式。css

1.下載矢量圖標ttf文件,幷包括在項目中html

具體如何下載,不詳寫了。將ttf文件拷貝至項目,幷包括在項目中。
下載下來的文件內容:
這裏寫圖片描述web

咱們須要將iconfont.ttf包括在項目中,打開demo_unicode.html能夠看到字體圖標的unicode編碼:
這裏寫圖片描述markdown

項目文件目錄:
這裏寫圖片描述svg

2.在style中定義樣式字體

個人ttf文件是放在/Resource/目錄下,因此FontFamily的值爲/Resources/#iconfont,文件目錄能夠爲其餘目錄,相應的修改Value值便可。ttf文件名稱不重要,能夠任意修改。#iconfont是字體名稱,阿里巴巴的矢量圖標默認字體名稱爲iconfont,不能夠寫錯了。編碼

<Style x:Key="FIcon" TargetType="TextBlock">
            <!--<Setter Property="FontFamily" Value="/MefMain;component/Resources/#iconfont"></Setter>-->
            <Setter Property="FontFamily" Value="/Resources/#iconfont"></Setter>
            <Setter Property="TextAlignment" Value="Center"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="FontSize" Value="20"/>
        </Style>

3.使用字體圖標atom

<StackPanel>
        <TextBlock Text="&#xe77e;" Style="{StaticResource FIcon}" FontSize="50" Margin="3" Foreground="Black"></TextBlock>
        <TextBlock Text="&#xe780;" Style="{StaticResource FIcon}" FontSize="50" Margin="3" Foreground="Black"></TextBlock>
        <TextBlock Text="&#xe78f;" Style="{StaticResource FIcon}" FontSize="50" Margin="3" Foreground="Black"></TextBlock>
        <TextBlock Text="&#xe77f;" Style="{StaticResource FIcon}" FontSize="50" Margin="3" Foreground="Black"></TextBlock>
    </StackPanel>

這裏寫圖片描述

相關文章
相關標籤/搜索