导言：记录一下 WPF 下面使用 ttf 图标文件的记录

一、下载图标文件

1. 图标网站

链接地址： https://www.iconfont.cn/

2. 下载图标

勾选到购物车内

下载代码 即可

这里有个小技巧
在按 F12 打开控制台 在控制台下输入如下代码，就可自动加入收藏夹中

var span = document.querySelectorAll('.icon-cover');
for (var i = 0, len = span.length; i < len; i++) { 
    console.log(span[i].querySelector('span').click());
}
1
2
3
4

下载的文件如下图

打开demo_index.html文件
Unicode栏目对应的下面的字符 就是对应的图标

二、WPF使用

1. 准备工作

上面的 iconfont.ttf 文件就是我们需要的使用的
把该文件复制到项目目录，这里我添加了好几个 这样的文件，也是为了测试

打开该字体文件，可以看到其 字体名字 ： iconfont
这个名称才是我们项目使用的

2. 项目使用

在 资源文件路径下添加如下代码，这个资源可以直接放在 App.xml 里面可以，也可以放置于窗口的资源里面。

<FontFamily x:Key="IconFont">
	Pack://application:,,,/EventLearn;component/Rescourses/#iconfont
FontFamily>

<FontFamily x:Key="PanuonIcon">
	Pack://application:,,,/EventLearn;component/Rescourses/#PanuonIcon
FontFamily>
1
2
3
4
5
6
7
8
9
10
11
12
13

• 你的程序名 可以在项目属性看
  
• 到字体文件的路径 就是项目根目录开始算的路径
• 字体名 就是之前说的打开那个ttf文件的字体名，和文件名不一样

3. 代码使用

在 mainwindow.xaml里面如下面这样引入

<TextBlock Foreground="BlueViolet" 
                   Grid.Row="3" Grid.Column="1" FontSize="20" 
                   VerticalAlignment="Center"  HorizontalAlignment="Center" 
                   FontFamily="{StaticResource IconFont}" Text=""/>
<TextBlock Foreground="BlueViolet" 
                   Grid.Row="3" Grid.Column="0" FontSize="20" 
                   VerticalAlignment="Center"  HorizontalAlignment="Center" 
                   FontFamily="{StaticResource PanuonIcon}" Text=""/>
1
2
3
4
5
6
7
8

效果如图下

图标可以像之前下载的 demo_index.html里面查看
也可以去 图标查看软件里面看，我用这个软件名叫 Character Map
可以直接在应用商店下载