WPF 字体图标 IconFont 的简单使用

原文: WPF 字体图标 IconFont 的简单使用

开篇

字体图标除了前面将的FontAwesome以外，还有阿里图标IconFont也是UI设计中经常使用的图标库。阿里图标的自定义功能比较好用，可以自定义下载的图标文件大小，自定义图标等。本篇主要谈谈IconFont字体图标在WPF中的简单使用。

实现

第一步：下载

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

方法：1.注册一个账号（为了方便管理自己的图标）

           2.通过搜索找到需要的图标

         3.将图标添加入库

4.找到右上角“购物车”，查看已经添加的图标。ps：图标可以添加任意个，最后所有的图标都保存在一个文件（.ttf）中。点击 “下载代码”即可。

5.下载的文件解压之后，文件如下所示

第二步：添加字体资源

将下载的.ttf文件（iconfont.ttf）文件添加到项目中，（ps：添加的详细方法可以查看上一篇《WPF 图标字体 FontAwesome 的简单使用》中的添加字体资源）如下图所示：

第三步：使用图标

1.找到图标和图标代码

在下载的文件中，有demo_index.html文件可以直接使用浏览器查看，里面包括了我们下载的所有的图标和图标代码（Unicode编码）。在打开的demo_index.html中，可以清晰的看到图标和图标代码。

2.使用代码

设置字体：

FontFamily="pack://application:,,,/Fonts/#IconFont"

设置图标：

Text=""

完整代码：

 

  
  
<Window x:Class= "Mef.UseIconFont.MainWindow"
xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x= "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d= "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc= "http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local= "clr-namespace:Mef.UseIconFont"
mc:Ignorable= "d"
Title= "MainWindow" Height= "450" Width= "800">
<Grid>
<StackPanel HorizontalAlignment= "Center" Orientation= "Horizontal">
<TextBlock Foreground= "Red"
Margin= "10"
FontSize= "50"
Height= "50"
FontFamily= "pack://application:,,,/Fonts/#IconFont"
Text= "&#xe66a;"/>
</StackPanel>
</Grid>
</Window>
 
 

运行效果：

3.简单拓展

源代码：

  
  
<Window x:Class= "Mef.UseIconFont.MainWindow"
xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x= "http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d= "http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc= "http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local= "clr-namespace:Mef.UseIconFont"
mc:Ignorable= "d"
Title= "MainWindow" Height= "450" Width= "800">
<Grid>
<Viewbox>
<StackPanel HorizontalAlignment= "Center" Orientation= "Horizontal">
<TextBlock Foreground= "Gray"
Margin= "10"
FontSize= "50"
Height= "50"
FontFamily= "pack://application:,,,/Fonts/#Iconfont"
Text= "&#xe66d;"/>

<TextBlock Foreground= "Lime"
FontSize= "50"
Margin= "10"
Height= "50"
FontFamily= "pack://application:,,,/Fonts/#Iconfont"
Text= "&#xe66a;"/>

<TextBlock Foreground= "Orange"
FontSize= "50"
Margin= "10"
Height= "50"
FontFamily= "pack://application:,,,/Fonts/#Iconfont"
Text= "&#xe66b;"/>
<TextBlock Foreground= "Red"
Margin= "10"
FontSize= "50"
Height= "50"
FontFamily= "pack://application:,,,/Fonts/#Iconfont"
Text= "&#xe66c;"/>
</StackPanel>
</Viewbox>
</Grid>
</Window>
 
 

总结

在VS2017中，FontAwesome字体图标给文本（text或者Content）设置图标时，设计器可以直接加载图。而Iconfont字体图标却不能加载，只能展示一个方框。

FontAwesome

Iconfont

源码下载：https://download.csdn.net/download/youyomei/10944700

Over 

每次记录一小步...点点滴滴人生路...