WPF使用矢量字体图标(阿里巴巴iconfont)

时间 2019-11-29

标签 wpf 使用矢量字体图标阿里巴巴 iconfont 栏目阿里巴巴繁體版

原文原文链接

原文: WPF使用矢量字体图标(阿里巴巴iconfont)

经常使用的矢量字体图标：阿里巴巴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>