WPF introduces ttf icon file usage record

导言：记录一下 WPF 下面使用 ttf A record of the icon file

一、下载图标文件

1. 图标网站

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

2. 下载图标

Tick ​​to cart

下载代码 即可

这里有个小技巧
在按 F12 打开控制台 Enter the following code in the console,It will automatically be added to your favorites

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

下载的文件如下图

打开demo_index.html文件
UnicodeThe column corresponds to the following characters is the corresponding icon

二、WPF使用

1. 准备工作

上面的 iconfont.ttf The file is what we need to use
Copy this file to the project directory,I've added several here 这样的文件,也是为了测试

Open the font file,可以看到其 字体名字 ： iconfont
This name is what our project uses

2. 项目使用

在 Add the following code under the resource file path,This resource can be placed directly App.xml 里面可以,It can also be placed in the resources of the window.

<!-- 模板 <FontFamily x:Key="IconFont"> Pack://application:,,,/你的程序名;component/Path to font file/#字体名 </FontFamily> -->

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

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

• 你的程序名 It can be seen in the project properties
  
• Path to font file It is the path from the project root directory
• 字体名 That's what I said before to open itttffile font name,not the same as the file name

3. 代码使用

在 mainwindow.xamlIt is imported as follows

<TextBlock Foreground="BlueViolet" Grid.Row="3" Grid.Column="1" FontSize="20" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="{StaticResource IconFont}" Text="&#xE6F9;"/>
<TextBlock Foreground="BlueViolet" Grid.Row="3" Grid.Column="0" FontSize="20" VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="{StaticResource PanuonIcon}" Text="&#xE94D;"/>

效果如图下

Icons can be downloaded as before demo_index.html里面查看
也可以去 Look inside the icon viewing software,I use this software called Character Map
可以直接在应用商店下载