一、什么是字体图标

我们在进行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. 【转】消除代码中的 if-else/switch-case

    在很多时候,我们代码中会有很多分支,而且分支下面的代码又有一些复杂的逻辑,相信很多人都喜欢用 if-else/switch-case 去实现.做的不好的会直接把实现的代码放在 if-else/swit ...

  2. python中的协程

    目录 协程是啥 协程和线程差异 简单实现协程 greenlet 安装方式 gevent 安装 1. gevent的使用 2. gevent切换执行 3. 给程序打补丁 进程.线程.协程对比 请仔细理解 ...

  3. SqlHelper模板

    在实际开发中,我们不会直接使用拼写SQL语句的方法进行数据库操作,而是使用参数化的方法进行数据库操作,这样做的好处很多,不仅提高了程序的健壮性,同时也避免的SQL注入的问题.在这里,笔者为初学者提供一 ...

  4. RPC调用与GC垃圾回收

    RPC调用 多个服务协同完成一次业务时,由于业务约束(如红包不符合使用条件.账户余额不足等).系统故障(如网络或系统超时或中断.数据库约束不满足等),都可能造成服务处理过程在任何一步无法继续,使数据处 ...

  5. python 实现微信自动回复(自动聊天)

    原文地址(本人):https://blog.csdn.net/a5878989/article/details/54974249 介绍 微信自动回复其实主要就是登录,接收消息,回复消息三个功能,微信没 ...

  6. Html中的img标签 加载失败

    在Http请求时,有时会遇到img图片标签加载失败,不显示的情况: 解决方法,在重新给src属性赋值时,先将onerror事件清除掉,再赋值,这样就不会存在循环调用问题了,代码如下; <img ...

  7. vue单页应用添加百度统计

    前言 申请百度统计后,会得到一段JS代码,需要插入到每个网页中去,在Vue.js项目首先想到的可能就是,把统计代码插入到index.html入口文件中,这样就全局插入,每个页面就都有了;这样做就涉及到 ...

  8. 2018-11-09 VS Code英汉词典插件v0.0.4-驼峰下划线命名

    首先, 在两天时间内安装数破百, 多谢支持. VS Code插件市场地址: 英汉词典 - Visual Studio Marketplace 开源库地址同前文: Visual Studio Code插 ...

  9. Tomcat post参数长处理

    如下图所示:增加maxPostSize="-1"属性即可

  10. html之多行文本textarea 及下拉框select(12)

    1.多行文本 多行文本使用textarea标签,默认值需要写在中间,和input标签不同,name属性用于后台获取数据(request.POST.get(meno)) <body> < ...