一、什么是字体图标

我们在进行GDI(图形界面)编程的过程中图标是不可少的。近些年随着网络的繁荣和移动应用的繁荣,矢量图的应用越来越火。

矢量图是一种用数学方法描述的、由一系列点和线组成的图,因此相比位图文件比较小,并且还和分辨率无关。字体图标就是将这种图只作为文件(常见的.ttf,即TrueType Font),并通过一些表示代码引用。

二、字体图标文件的获得

1、下载一些公共的图标如:Awesome阿里巴巴

这些网站中有的可以直接下载.ttf(或其他字体图标格式)文件,有的需要自己打包成,这就需要先下载个图标集(.svg文件集),借助在线工具或者fontCreator软件工具生成。

2、由美工(UI)制作

三、在WPF中的应用

1、把字体文件夹拷贝到项目中,目录为(/fonts/字体文件或其他)    
    2、对文件右键,设置“复制到输出目录”为“如果较新则复制” 
    3、编写UI项目资源样式 /skin/style.xaml(或者其他常见资源引入方式)

4、作为资源引用

    <Window.Resources>
<Style x:Key="FontAwesome">
<Setter Property="TextElement.FontFamily" Value="pack://application,,,/IconFontTest;component/Resources/#FontAwesome" />
<Setter Property="TextBlock.Width" Value=""></Setter>
<Setter Property="TextBlock.Height" Value=""></Setter>
<Setter Property="TextBlock.TextAlignment" Value="Center"></Setter>
<Setter Property="TextBlock.FontSize" Value=""></Setter>
<Setter Property="TextBlock.Foreground" Value="Green"></Setter>
</Style>
</Window.Resources>

5、TextBlock作为载体引用

        <WrapPanel Margin="">
<TextBlock x:Name="tb1" 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>

6、2、ICO字体对照表,如果是XAML则是&#xf……如果是CS则是\uf……

WPF中应用字体图标的更多相关文章

  1. 在WPF中使用字体图标

    一.源码描述    这是一款基于WPF窗体应用程序的字体图标示例源码,    该源码简单易懂使用于初学者和实战项目应用,    感兴趣的朋友们可以下载看看哦. 二.功能介绍    1.用ICO字体代替 ...

  2. 在WPF中使用FontAwesome图标字体

    原文:在WPF中使用FontAwesome图标字体 版权声明:原创内容转载必须注明出处,否则追究相关责任. https://blog.csdn.net/qq_36663276/article/deta ...

  3. WPF使用矢量字体图标(阿里巴巴iconfont)

    原文:WPF使用矢量字体图标(阿里巴巴iconfont) 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/lwwl12/article/details/78 ...

  4. 如何在移动端app中应用字体图标icon fonts (转)

    原文: http://www.cnblogs.com/willian/p/4166757.html?utm_source=tuicool&utm_medium=referral How to ...

  5. 如何在移动端app中应用字体图标icon fonts

    How to use icon fonts in your mobile apps 在任何APP设计中实现可图形的矢量缩放最完美的方式是使用字体图标. 移动端的设计变的越来越复杂.原因在于多样的屏幕尺 ...

  6. AngularCli项目中添加字体图标(Font)详解

    本文主要讲如何在AngularCli生成的项目中使用字体图标. 一 SVG图标准备 将需要转换为字体图标的图片转换为SVG格式. 这个让项目视觉设计师搞定即可. 二 SVG图标转Font 可以通过Ic ...

  7. 如何在微信小程序中使用字体图标

    微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格 ...

  8. 初学者--bootstrap(六)组件中的字体图标----在路上(9)

    组件---字体图标 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 1.如何使用:        出于性能的考虑,所有图标都需要一个基类和对应每个图标的类.把下面的代码放在 ...

  9. vue中引入字体图标报错,找不到字体文件

    在用vue + webpack进行开发的时候,在引用字体图标遇到字体无法加载的问题: 报以下错误 搞了好久没搞定,最后才找到解决方法(还是没有找到原因) 修改字体图标的css中引入字体文件的路径 以前 ...

随机推荐

  1. 12.QT4.7.4-解决WIN平台和Linux平台中文乱码,QLineEdit右击菜单中文显示

    1.解决Win平台中文显示 1.1首先解决win平台上中文显示乱码问题 1)首先查看qt creator的编码格式 通过->编辑->选择编码 查看. 2)如果qt creator的编码格式 ...

  2. idea代码提示

    idea代码提示:Keymap-->Main menu-->Code-->Completion去掉Cyclic Expand Word的快捷键将Basic的快捷键更改为Alt+/

  3. laravel使用Schema创建数据表

    1.简介 迁移就像数据库的版本控制,允许团队简单轻松的编辑并共享应用的数据库表结构,迁移通常和Laravel的schema构建器结对从而可以很容易地构建应用的数据库表结构.如果你曾经告知小组成员需要手 ...

  4. Angular6+ng-zorro实现登录页面

    一.效果图 二.html代码 <div class="login-container"> <div class="login-box"> ...

  5. jQuery: 选择器,筛选器

    jQuery 简介 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javas ...

  6. 二进制安装 kubernetes 1.12(三) - 部署 Master 节点组件

    在Master节点部署组件 在部署Kubernetes之前一定要确保etcd.flannel.docker是正常工作的,否则先解决问题再继续. 创建 CA 证书 mkdir -p /iba/master ...

  7. es6 语法 (map、set和array 的对比)

    //数据结构对比 增查改删 { //map和array对比 let map = new Map(); let array = []; //增 map.set('t',1); array.push({t ...

  8. win10电脑怎么录制视频 电脑录制视频软件

    win10电脑怎么录制视频?相信不少网友正在面临这个疑惑.现如今是网络信息科技时代,快速传播信息的途径和方式有很多种.其中,通过录制电脑视频,可以制作视频教程.游戏解说,还可以录制在线视频存储影视资源 ...

  9. Mycat 中间件配置初探与入门操作

    Mycat中间件配置初探与入门操作 By:授客 QQ:1033553122 实践环境 Mycat-server-1.5.1-RELEASE-20161130213509-win.tar.gz 下载地址 ...

  10. Testlink1.9.17使用方法(第九章 测试结果分析)

    第九章 测试结果分析 QQ交流群:585499566 TestLink根据测试过程中记录的数据,提供了较为丰富的度量统计功能,可以直观的得到测试管理过程中需要进行分析和总结的数据.点击首页横向导航栏中 ...