一、阿里巴巴图标矢量库（https://www.iconfont.cn/）

1、创建字体工程

WPF-结合阿里巴巴矢量图标库使用ttf格式的图标字体_Text

WPF-结合阿里巴巴矢量图标库使用ttf格式的图标字体_ico_02

2、往工程里添加图标

WPF-结合阿里巴巴矢量图标库使用ttf格式的图标字体_ico_03

WPF-结合阿里巴巴矢量图标库使用ttf格式的图标字体_ico_04

3、生成并下载字体文件

  点击上图的“下载到本地”按钮。

4、window下安装字体库并查看查看对应的unicode码

① 双击“iconfont.ttf”文件安装字体：

WPF-结合阿里巴巴矢量图标库使用ttf格式的图标字体_xml_05

② 打开“控制面板\外观和个性化\字体”，点击左侧的“查找字符”按钮，然后选择对应的字体+图标进行查看：

WPF-结合阿里巴巴矢量图标库使用ttf格式的图标字体_Text_06

5、本地扩展字体库-FontCreator工具

① 添加图标

  暂略

② 查看字体中图标的unicode码

  暂略

③ 保存为ttf文件

  暂略

二、WPF使用ttf矢量图标字体

1、WPF导入ttf文件

WPF-结合阿里巴巴矢量图标库使用ttf格式的图标字体_ico_07

WPF-结合阿里巴巴矢量图标库使用ttf格式的图标字体_Text_08

2、App.xaml中引进资源：<FontFamily x:Key="IconFont1"> Pack://application:,,,/ZhibiXiaobai;component/Resources/#iconfont </FontFamily>如下：

<Application x:Class="ZhibiXiaobai.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:ZhibiXiaobai"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
              Startup="Application_Startup">
    <Application.Resources>
        <ResourceDictionary>
            <FontFamily x:Key="IconFont1">
                Pack://application:,,,/ZhibiXiaobai;component/Resources/#iconfont
            </FontFamily>
        </ResourceDictionary>
    </Application.Resources>
</Application>

  注：#iconfont为字体的名字，见“一、4”图中展示的字体名称。

3、控件使用图标字体资源，格式FontFamily="{DynamicResource 资源名}" Text="&#x +unicode码;"，如下：

<TextBlock FontFamily="{DynamicResource IconFont1}" Text="" Foreground="Black" FontSize="15"/>

  效果如下图：

WPF-结合阿里巴巴矢量图标库使用ttf格式的图标字体_Text_09

4、后台动态生成的控件使用ttf矢量图标字体

  ① 绑定样式：textBlock1.FontFamily = new FontFamily(new Uri("Pack://application:,,,/HostControl.APP;component/Resources/"), "./#iconfont");

  ② 文本赋值：textBlock1.Text = "\xE780";

 

作者：꧁执笔小白꧂