一、下载图标文件

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());
}

下载的文件如下图

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

二、WPF使用

1. 准备工作

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

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

2. 项目使用

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

<!-- 模板
<FontFamily x:Key="IconFont">Pack://application:,,,/你的程序名;component/到字体文件的路径/#字体名
</FontFamily>
--><FontFamily x:Key="IconFont">Pack://application:,,,/EventLearn;component/Rescourses/#iconfont
</FontFamily><FontFamily x:Key="PanuonIcon">Pack://application:,,,/EventLearn;component/Rescourses/#PanuonIcon
</FontFamily>

你的程序名 可以在项目属性看
到字体文件的路径 就是项目根目录开始算的路径
字体名 就是之前说的打开那个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=""/>

效果如图下

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

WPF引入 ttf 图标文件使用记录相关推荐

【Flutter】Icons 组件 ( FlutterIcon 下载图标 | 自定义 svg 图标生成 ttf 字体文件 | 使用下载的 ttf 图标文件 )
文章目录一.FlutterIcon 下载图标二.自定义 svg 图标生成 ttf 字体文件三.使用下载的 ttf 图标文件四.完整代码示例五.相关资源一.FlutterIcon 下载图标 ...
小程序引入ttf字体文件
首先要把我们需要使用的TTF字体文件上传到服务器上,拿到一个网络路径,如下图引入到wxss文件内: 然后直接使用上面我们定义的名称就可以.
C#WPF 使用.ttf字体文件设置font相关以及查看使用系统自带矢量图标
关键:查看.ttf文件里面附带的矢量图标首先,如果没有矢量图标可以自行百度矢量图标或者矢量图标库自己找寻,文件格式一般为.ttf结尾的文件. 这里展示一种添加系统里面自带的字体格式的文件到项目中并且 ...
小程序如何引入ttf字体文件
首先把字体文件上传到服务器上然后进行引入即可 (链接需要配置一下跨域,不然在真机上会失效) @font-face { font-family:'youth'; src:url('https://* ...
ElementUI引入自定义图标
目录步骤说明新建项目添加图标项目设置文件引入使用技巧步骤说明新建项目在iconfont网站的"资源管理->我的项目"页面里新建项目,注意"Font ...
uniapp引入字体图标库
步骤 1.首先在项目文件夹的src目录下新建一个styles文件夹,将字体图标文件放到其中iconfont.wxss 2.在App.vue中的标签中全局引入字体图标文件 ``` 3.这样就完成了字体图 ...
WPF 如何引入图标文件
文章目录前言: WPF 引入图标什么是ttf字体阿里云矢量库下载 WPF引用为什么文件路径是#iconfont而不是iconfont.前面为什么要带个#号? 前言: 我最近在研究WPF,吃饭嘛 ...
.ttf字体文件引入vue项目及使用
出自文章:.ttf字体文件引入vue项目及使用 UED要求使用非系统自带字体 1.在项目的assets文件夹中创建fonts文件夹,将下载好的.ttf字体文件放进去,并创建font.css文件 2.在 ...
Flutter引入iconfont图标，并自动生成dart图标文件
Flutter引入iconfont图标并自动生成dart图标文件下载iconfont文件 flutter 项目 pubspec.yaml文件中配置自动转换脚本下载iconfont文件将icon ...

WPF引入 ttf 图标文件使用记录