一.温故知新 之前有专门介绍过如何使用类似fontforge软件制作自定义字符字体以及如何在web中实际应用. 不过,文中提到的是利用系统自带的一些特殊字体,如WINGDNG3.ttf字体. 显然,系统自带字体有限.好在,前段时间神飞整理出了一篇雪中送炭的文章:“icon font大搜罗”,里面罗列了非常多的免费或不免费的优秀图标字体(图片较长,滚动显示): 或者是参见css-tricker网站整理的图标字体们 – Flat Icons & Icon Fonts – by Chris Coyie…

http://www.zhangxinxu.com/wordpress/2012/06/free-icon-font-usage-icomoon/…

Dripicons 是一个好看的免费图标集,有超过 90 个扁平风格的图标,适用在 Web 应用程序中使用,如:箭头,媒体,图表等等. 集合多种矢量格式(PSD,AI,EPS,PDF,SVG),也可以作为网络字体. 您可能感兴趣的相关文章 那些让人惊叹的的国外创意404错误页面设计 让人爱不释手的精美 Web 应用程序图标素材 赞!10套精美的免费网站后台管理系统模板 期待已久的2012年度最佳 jQuery 插件揭晓 10大流行的 Metro UI 风格 Bootstrap 主题 官方主页 …

一.看似无关紧要的事件背景 之所以花时间折腾fontforge这个软件,去制作什么自定义的字体是有原因滴. 之前提过,最近我抽空将公司的手机软件HTML5网页化.期间碰到这么一个问题,页面低栏上的电话号码是个特殊的字体(在window系统下有近似字体Georgia – twitter字母个数提示使用的字体),而且不同城市下的号码值是不一样的.软件的做法就是截图,截了N张图,然后根据城市的不同使用不同的图片.显然,网页不能这样搞,毕竟是实时访问的东西,流量啊,速度啊什么的很重要. 在PC上,我直接…

uiw-iconfont v1.2.6 已发布,uiw-iconfont 是从 uiw 组件库抽离出来的图标字体,基于 svg 图片生成的图标字体. 更新内容 新增 map android-o dashboard table qrcode printer barcode 等7个图标. 安装 npm install uiw-iconfont --save 使用 您可以使用 uiw-react.github.io/icons/ 轻松找到您要使用的图标.一旦您复制了所需图标的CSS类名,只需将图标和图…

开题:之前就有所耳闻,最近两天第一次运用到图标字体.刚开始嘛,一脸懵逼的状态.成功运用之后就来记录一下使用过程咯! 1. 打开在线生成工具:https://icomoon.io/app/#/select 2. 导入本地文件或者选择图标库 (1) 如果你本地没有.svg图标,你可以选择在线免费的图标. 选择一个你想要的icons 接着就会出现如下页面: (2) 点击左上角按钮,选择新建一个图集 然后就会出现: 如果你本地有自己下载过的.svg文件,可以直接将文件拖拽到页面上,如下:** 这时候浏览…

IcoMoon 使用官方地址 http://icomoon.io/实际上,它是一种字体,只不过这种字体的字象图标一样,比如windows中自带的MT Extra Webdings Wingdings字体.使用的方法就是引入CSS即可我们需要在IcoMoon App中定制他们,网站可以为你生成图标的CSS. 进入到IcoMoon App中,选中你需要的图标,然后点击底部的font便会显示使用该"文字"对应的编码在顶端的Prefences中勾选Encode & Embed Font…

就我个人而言,往往要想找点什么ICON素材啊,往往都是酱婶滴,先去FontAwesome(在线图标字体库,但资源有限)里面巴拉巴拉,或者其他资源看看有没有合适的.如果没有就去求助我们大UI,笑笑给我来整个“加号”啊,笑笑有“减号”吗?来一个来一个,笑笑再给我来个“垃圾箱”呗...嗯,没错,我一般都是这么折磨我们UI的.个人还是比较喜欢FontAwesome,其提供的资源很丰富,风格很统一,而且直接在页面内引用需要的样式即可,不需要自己再去调整素材的样式.而我们今天要白话的IcoMoon,大致作用…

官网地址:https://icomoon.io/app/#/select 已发现的方便之处: 1.官网已提供大量常用图标字体: 2.可通过 svg 将其转换为 图标字体: 3.不仅可转换,还可自定义编辑图标字体(有时图标字体大小不统一,在使用过程中再去调整字号协调,相对繁杂): 4.所提供文件中的 .json 文件,可无限次利用,多用于新增图标字体,一键将之前的图标字体导入: 5........ 下面简单认识一下界面 1.可选图标字体,此界面默认从图标库添加部分图标在此 2.图标库(通过点击上图…

发现一个奇怪的现象:(http://m.muzhiwan.com) 这里面的图标竟然不是一张张小图标图片?Firebug下查看一下元素,竟然是这样的: 页面源代码如下: 好奇怪啊,这些个乱七八糟的&#xfxxx难道就是对应的图标?于是产生了好奇心,百度一下,发现原来这是矢量图标字体! 使用icon font来生成图标相对于基于图片的图标来说,有如下的好处:1.自由的变化大小2.自由的修改颜色3.添加阴影效果4.IE6也可以支持5.支持图片图标的其它属性,例如,透明度和旋转等等6.可以添加text…