学习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-10 01:02:39

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

Font Awesome图标字体应用及相关

作为web开发者,难免要经常要用到些小图标,给自己web增添几分活力和多样性.像这些: 而Font Awesome刚好为我们提供了这些.到目前为止,Font Awesome提供了有500多个可缩放的的矢量图标,并且可以使用css所提供的所有特性对这些图标进行更改,包括:大小.颜色.阴影或者其他任何支持的效果.这些图标基本涵盖了web开发者的基本需求,并且Font Awesome还在不断维护更新,提供新的图标,以供开发者使用. 在此,主要介绍一下Font Awesome图标字体的基本使用. 到Fo

Font Awesome图标字体库和CSS框架

Font Awesome网址 http://fontawesome.dashgame.com/ CDN引入Font Awesome <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> 改变突变大小.颜色.背景色的方式:修改背景色.颜色.字体大小属性 background color font-size

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

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

在WPF应用程序中使用Font Awesome图标

Font Awesome 在网站开发中,经常用到.今天介绍如何在WPF应用程序中使用Font Awesome . 如果是自定义的图标字体,使用方法相同. 下载图标字体 在官方网站或github上下载资源 http://fontawesome.io/#modal-download https://github.com/FortAwesome/Font-Awesome 解压下载的文件(我是在github上下载的源码),我们要使用的是其中css和fonts文件夹中的内容 在项目中加入字体 新建WPF应

最新的超棒免费图标字体(icon font)收集

今天我们收集了18套非常有特色的免费图标字体给大家,如果能够将它们应用到你的用户界面设计上,绝对是完美之极! 到底什么才是图标字体? 图标字体是字体文件,用符号和字形的轮廓(像箭头.文件夹.放大镜等) 代替标准的文字数字式字符.图标字体就像Dingbat fonts,是专门为用户界面设计,就像其它网站字体一样,使用[email protected]在web浏览器里展示.处理方式类似网站字体: 拥有跨浏览器支持(甚至是IE6,例如,使用@font-face渲染网页字体) 如果使用者调整他们的浏览器

Font Awesome 完美的图标字体

好久没来,虽说鄙人的人气不咋地,但还是很想念自己这一亩二分田地. 近期用在平台开发中,看着设计师摆开阵势,准备大画图标,想着自己将会很KUBI拼凑css-sprite图片,接着写一大堆 class^="icon-XXXX",此处空余千行泪... 其实,做前端的都有这样的情绪,“我不想切图标啊!!!”,本人甚是.就在茫然不知所措是,偶然在 http://www.bootcss.com/p/font-awesome/ 发现了新大陆!!!真的是相见恨晚. 在此给出这个项目的简介: 一个字体文

Font Awesome奥森图标一套绝佳的图标字体库和CSS框架

迄今最完好的翻译版本-一套绝佳的图标字体库和CSS框架(奥森图标) Font Awesome 逐浪CMS官方版正式开放啦! 免费获取和使用就在:http://code.zoomla.cn/boot/font.html(非广告官方翻译版本,希望对广大开发者有用). 逐浪CMS已经完全支持Font Awesome奥森图标! Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. 一个字库,479个图标 仅一个F

如何应用Font Awesome矢量字体图标

Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库.这套图标字体集几乎囊括了网页中可能用到的所有图标,除了包括 Twitter Boostrap 的默认图标外,还有社交网络图标.Web 应用程序图标和编辑器图标等等,可以免费用于商业项目. 可以到官方站点查看更详细的信息和使用样例. 下面仅记录使用步骤: 1.到官网上下载最新版本的Font Awesome. 2.解压文件,将其中的css和fonts文件夹拷贝到项目中,其中css文件夹中有两个css文件(fo

[.NET源码学习]实例化Font,遭遇字体不存在的情况。

实例化Font类时,当传入参数为不存在或未安装的字体时,Windows系统会用Microsoft Sans Serif字体替代该字体. Msdn: "For more information about how to construct fonts, see How to: Construct Font Families and Fonts. Windows Forms applications support TrueType fonts and have limited support fo