学习WPF——使用Font-Awesome图标字体

图标字体介绍

在介绍图标字体之前,不得不介绍图标格式ICON

ICON是一种图标格式,我们操作系统中各种应用程序都包含一个图标

比如QQ程序的图标是一个可爱的企鹅,我的电脑是一个显示器图标

----------------

一个图标文件是扩展名为.ICO或者ICON的文件

直到现在图标文件还是在计算机程序中随处可见

但有时候需要在不失真的情况下放大图标

因为ICON本身与JPEG\PNG格式的图形文件差异不大,也是非矢量图形

所以图标文件就很难满足这种需求

----------------

为了解决这种问题,就有作者把图形信息做到字体中去

我们今天要使用的Font-Awesome就是这种技术形式的一种实现

(当然还有其他办法解决这种问题,比如用css3绘制图标,但那种技术形式就比较难应用于客户端程序中了)

----------------

常见的图标字体有很多,但我认为Font-Awesome是迄今为止最出色的图标字体(没有之一)

图标多、图标美观、兼容各种应用场景是其最主要的有点

 

WPF中使用Font-Awesome图标字体

我曾经在Qt应用程序中使用过Font-Awesome图标字体,用起来非常方便,展现效果也一如预期

但在WPF应用程序中使用图标字体就会显示成一个方框,如下图

后来,才找到解决办法:

首先到Font-Awesome官方网站下载字体程序

下载到的压缩包,解压后获得图标字体文件

然后把字体文件拷贝到项目中

并设置“复制到输出目录”为“如果较新则复制”

然后编辑程序代码:


<Window x:Class="WpfApplication1.MainWindow" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml
Title="MainWindow"> 

<Window.Resources> 

<Style x:Key="FontAwesome">

<Setter Property="TextElement.FontFamily" Value="pack://application:,,,/#FontAwesome" />

<Setter Property="TextBlock.Width" Value="100"></Setter>

<Setter Property="TextBlock.Height" Value="100"></Setter>

<Setter Property="TextBlock.TextAlignment" Value="Center"></Setter>

<Setter Property="TextBlock.FontSize" Value="60"></Setter>

<Setter Property="TextBlock.Foreground" Value="Green"></Setter>

</Style>

</Window.Resources> 

<WrapPanel Margin="12"> 

<TextBlock Text="" Style="{DynamicResource FontAwesome}" />

<TextBlock Text="" Style="{DynamicResource FontAwesome}" />

<TextBlock Text="" Style="{DynamicResource FontAwesome}" />

<TextBlock Text="" Style="{DynamicResource FontAwesome}" />

<TextBlock Text="" Style="{DynamicResource FontAwesome}" />

<TextBlock Text="" Style="{DynamicResource FontAwesome}" />

<TextBlock Text="" Style="{DynamicResource FontAwesome}" />

<TextBlock Text="" Style="{DynamicResource FontAwesome}" />

<TextBlock Text="" Style="{DynamicResource FontAwesome}" />

<TextBlock Text="" Style="{DynamicResource FontAwesome}" />

</WrapPanel> 
</Window>

运行程序,看到图标,大功告成

 

 

修改记录

2015-12-26:编写样例程序,完成部分文章内容

2014-12-29:修改部分内容,修改文档格式

 

参考资料

add-icon-font-in-wpf

changing-font-icon-in-wpf-using-font-awesome

 

 

 

 

 

 

 

时间: 2024-11-02 13:24:56

学习WPF——使用Font-Awesome图标字体的相关文章

01_MUI之Boilerplate中:HTML5示例,动态组件,自定义字体示例,自定义字体示例,图标字体示例

 1安装HBuilder5.0.0,安装后的界面截图如下: 2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上图的Boilerplate.html: 3 代码内容如下: <!--          作者:XXX@qq.com          时间:2015-08-02          描述:使用MUI,您可以先简单地直接将以下CSS和JS加入到您的HTML文档中:                <link

图标字体 Font Awesome 中文站上线啦!全面兼容IE7+

作为最流行的图标字体Font Awesome,它被认为是为Bootstrap而创造的图标字体: 具有以下几大优点: 1.具体矢量图形性质,可以无限放大为不失真: 2.图标齐全,最新发布的4.1.0有439款图标,网站开发常用图标全部包括: 3.无需JavaScript等任何插件,可以独立运行 4.可以通过CSS任意控制所有图标的大小 ,颜色,阴影,就像真正的字体一样,你可以控制所有! 5.完全免费,可以用于商业用途; 但是惟一的不足就是IE兼容性问题 这就让所有web开发者望而却步,在当前环境,

图标字体化浅谈[转]

在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化.在微社区项目中,有很多小的Icon(图 标),如分享.回复.赞.返回.话题.访问.箭头等,这些Icon(图标)一般都是纯色的.开始制作时考虑用双倍大小的Sprite图,通过CSS样式设 置只显示二分之一尺寸,这样在Retina屏上显示的大小是正常的,一旦放大屏幕后图标又变得模糊不清,测试的效果不是很理想,后来又考虑多套图标适配方 案.SVG矢量图等,都因为种种原因放弃掉了(

图标字体化浅谈

           在做手机端Web App项目中,经常会遇到小图标在手机上显示比较模糊的问题,经过实践发现了一种比较好的解决方案,图标字体化.            在微社区项目中,有很多小的Icon(图标),如分享.回复.赞.返回.话题.访问.箭头等,这些Icon(图标)一般都是纯色的.开始制作时考虑用双倍大小的Sprite图,通过CSS样式设置只显示二分之一尺寸,这样在Retina屏上显示的大小是正常的,一旦放大屏幕后图标又变得模糊不清,测试的效果不是很理想,后来又考虑多套图标适配方案.

19套最新的免费图标字体集

期:2012-10-21  来源:GBin1.com 将图标字体使用在网站上,这会是一个全新的发展趋势.一旦font-face开始支持现代浏览器,那么在网页中插入图标字体有可能成为最简单的方法之一了.那为什么图标字体可以成为未来的新趋势?它的优点又是些什么呢?下面,我们总结了这么几个原因: 它就像字体一样 ,我们可以改变图标的尺寸并让视觉效果更好. 我们也可以改变它们的颜色,增加阴影效果. 使用CSS3,我们还可以将它旋转,改变方向,还有过渡效果和不同层次的透明度. 透明效果只有在IE6的环境下

简洁的图标Cikonss:CSS3响应式图标字体

文章简介:给大家介绍一个很简洁的图标 Cikonss,和一般的图标或图标字体不一样的地方在于,它使用CSS来创建的,而不是图片创建也不是字体图标.包含了40多个不同的图标类型,并且支持响应式的布局,并且兼容浏览器,因为不使用CSS3. 在这篇文章中,给大家介绍一个很简洁的图标 Cikonss,和一般的图标或图标字体不一样的地方在于,它使用CSS来创建的,而不是图片创建也不是字体图标.包含了40多个不同的图标类型,并且支持响应式的布局,并且兼容浏览器,因为不使用CSS3. 使用图标字体的最大好处就

如何更改桌面图标字体颜色

如何更改桌面图标字体颜色 右键--属性--外观--高级--项目下拉箭头--图标

html5-css font 定义图标,利用woff文件,IIS下却无法显示图标

问题描述 css font 定义图标,利用woff文件,IIS下却无法显示图标 css font 定义图标,利用woff文件,再VS里面直接运行页面可以正常显示图标,在IIS下运行 却不显示图标,woff文件也有在IIS注册了.web.config也有配置,是什么问题呢?

Win8系统桌面图标字体阴影不在了怎么办?

  在win8.1系统中,通常情况下桌面图标下方的文字会伴随着阴影存在,一时为了方便用户查找发现,其次是在一定基础上起到了美化的作用,不过近期有朋友发现,原本在桌面图标下方的文字阴影不在了,桌面图标文字也变得非常的难看,对于该问题我们如果来应对解决呢?下面随小编看下详细的解决方法吧! 方法如下: 1.首先右键点击--这台电脑,然后点击--属性. 2.在系统信息界面点击"高级系统设置"; 3.注意点击高级系统设置; 4.选择---高级-性能---设置; 5.自定义下面:勾选-在桌面上为图