WPF 字体图标 FontAwesome 的简单使用

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

开篇

一个好的应用程序，离不开好看的界面，在应用程序界面设计过程中，图标往往不会离开设计人员的视线。图标的存在形式有很多中：png\jpg\ico\bmp。。。等很多种，但是这些图标都存在一个弊端，他们不是矢量图，不能在不失真的情况下进行缩放等矢量图具备的特点。而字体图标恰好的解决了这个弊端，将图标封装在字体里面，以字体的形式展示，这样图标就可以自由的缩放、更改颜色等。

实现

第一步：下载

 

地址：http://fontawesome.dashgame.com/

网盘链接： https://pan.baidu.com/s/1KIfKXZmns48KhZUBUhBltQ      提取码：z5vy

下载文件之后，解压，找到fonts文件

第二步：添加字体资源

1.将资源添加到项目中有多种方法：这里介绍常用的两种。

第一种：

（1）右键文件夹（你要存储的位置），添加现有项

（2）找到下载的ttf格式的字体文件

 

第二种：

（1）找到字体资源文件（.ttf），将资源文件复制到项目文件夹中，例如本项目的的Fonts文件夹。

（2）将选中项目内任何文件，点击左键点击上方的“显示所有文件”图标

（3）找到需要添加的资源文件，右键“包括在项目”

完成之后，在点击一次“显示所有文件”，如下图所示。

2设置资源生成方式：

（1）如果需要资源以文件的形式，设置如下。

         右键文件---》属性

设置为：

（2）如果需要资源嵌入到程序资源（在.exe文件）里面，设置如下。

复制到输出目录：任意位置均可。

 

第三步：使用图标

1.找到需要的图标和图标代码

由于WPF使用资源的方式和Web不同，不可以直接使用CSS样式文件，所以需要找到对应图标的代码（Unicode编码），才可以使用。

（1）通过网站http://fontawesome.dashgame.com/ 或者官网 https://fontawesome.com/ ，找到需要的图标图标名称，例如温度计“ thermometer-empty”，复制图标名称：“ thermometer-empty”。

（2）打开我们下载好的文件中的CSS文件“font-awesome.css”，建议使用VS打开。

（3）找到图标代码：在打开的CSS文件中，Ctrl+F（一般的编辑器都有搜索功能）搜索，Ctrl+V粘贴我们图标的名称。就可以找到需要的图标的代码，如下图：\ f2cb

（4）图标代码 “转义”：图标编码“\ f2cb”不能直接被WPF程序识别，需要进行“再编码”，也就是转换成WPF能识别的图标代码。方法：将图标代码中“\ f2cb”的“\”替换为“&#x”并添加结尾符号”;”。即：“&# xf2cb;”

 

2.使用图标代码

（1）设置字体

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

（2）添加图标代码

Text=""

完整代码

  
  
<Window x:Class= "Mef.UseFontAwesome.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.UseFontAwesome"
mc:Ignorable= "d"
Title= "MainWindow" Height= "450" Width= "800">
<Grid>
<StackPanel Margin= "20">
<TextBlock Foreground= "Red"
FontSize= "50"
Height= "50"
FontFamily= "pack://application:,,,/Fonts/#FontAwesome"
Text= "&#xf2cb;"/>
</StackPanel>
</Grid>
</Window>
 
 

运行效果：

3.简单拓展

FontAwesome字体图标是矢量图，图标的本身格式是字体，因此可以实现不失真的缩放，还可以像字体一样设置不同的颜色等，效果如下图所示。

源代码：

  
  
<Window x:Class= "Mef.UseFontAwesome.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.UseFontAwesome"
mc:Ignorable= "d"
Title= "MainWindow" Height= "480" Width= "640">
<Grid>
<Viewbox>
<StackPanel HorizontalAlignment= "Center" Orientation= "Horizontal">
<TextBlock Foreground= "Gray"
Margin= "10"
FontSize= "50"
Height= "50"
FontFamily= "pack://application:,,,/Fonts/#FontAwesome"
Text= "&#xf2cb;"/>

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

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

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

Over

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