經常使用的矢量字體圖標:阿里巴巴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="" Style="{StaticResource FIcon}" FontSize="50" Margin="3" Foreground="Black"></TextBlock>
<TextBlock Text="" Style="{StaticResource FIcon}" FontSize="50" Margin="3" Foreground="Black"></TextBlock>
<TextBlock Text="" Style="{StaticResource FIcon}" FontSize="50" Margin="3" Foreground="Black"></TextBlock>
<TextBlock Text="" Style="{StaticResource FIcon}" FontSize="50" Margin="3" Foreground="Black"></TextBlock>
</StackPanel>