iconfont最基础使用 一.总结 一句话总结: 你加入购物车然后下载好了图标之后,里面有demo_index.html,会非常详细的教你 Unicode/Font class/Symbol三种使用方式 可以直接引iconfont.css来使用,因为里面的代码就是Unicode用@font-face{}方式定义iconfont字体的方式 1.定义字体的方式(比如iconfont)? @font-face{} @font-face { font-family: 'iconfont'; src:

字体图标库的使用 这是之前留下的博客,由于一堆博客没写完,本周周末做了个补充,可能内容上会有点不太斜街,请见谅... 本文大部分内容是自己结合过往经验探索总结的字体图标维护方式 iconfont-阿里矢量图标库 登录/注册 打开阿里矢量图标库地址:https://www.iconfont.cn/home/index,并使用 github 账号注册/登录 搜集需要的图标 选中菜单的图标库,然后点击页面右侧的红色搜索按钮 如下图是我搜索 地图 出来的图标库列表 在首页搜索你想要的图标(中英文都 ok

一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜色,可以添加阴影,旋转,透明度等视觉效果. 3.兼容性 图标字体IconFont支持所有现代浏览器,包括IE低版本. 二.IconFont的缺点 1.图标字体只能被渲染成单色或者css3的渐变色: 2.设计自已的IconFont需要花费大量时间,也会增加前端重构的成本: 3.Firefox和IE9不

一.补充知识:PNG.IconFont.SVG理论 PNG为位图,是由不同的排列和染色的像素点组成的图像,位图的扩大实质是增加单个像素点的大小,故而导致在不同分辨率表现非常糟糕. SVG为可缩放矢量图,它不会像位图一样因为缩放而让图片质量下降,在不同分辨率的表现都一样清晰. IconFont是WebFont形式的图标,可以把他认为就是WebFont,制作来自于SVG矢量图,在不同分辨率的表现都一样清晰. 图标类型 构成 优势 劣势 PNG 独立像素点 可以实现各种色彩及真实画面的复现 体积比较大

icon font 使用与svg应用分享 icon font 字体概述 css3增加了@font-face属性,传统的浏览器是通过font-family来设置字体,如果系统里没有的话就用其它字体来代替. 有了@font-face属性就方便多了,可以由开发人员通过设计自定义字体来进行的,加载过程是浏览器通过下载字体,再进行渲染页面 font-face可以设置自定义自体,也可以设置自定义图片字体,font icon由此诞生.@font-face 引入生成好的字体文件 ,然后在网 页中需要使用某个图标

1. 第一步.准备svg格式图片 2. 登陆http://iconfont.cn/网站,上传图标. 3. 选中需要制作成iconfont的图标. 4. 将选中的图标转储为项目 5. 下载至本地. 6. 使用: a. 引入下面四个文件 b. 添加css到css文件内 @font-face {font-family: "iconfont"; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot?#iefix') format('

1 背景 最近因为一些个人私事导致好久没写博客了,多事之年总算要过去了,突然没了动力,所以赶紧先拿个最近项目中重构的一个小知识点充下数,老题重谈. 在我们App开发中大家可能都会有过如下痛疾(程序员和设计妹妹注意喽): 好多小的图标好烦人,又占体积还要考虑分辨率,一拉伸就模糊等. 同一个图标不同状态还有不同颜色的多张. 总是幻想IOS.Android.Web等对于一个图标只切一次图多好. 如果你有过类似的痛疾那么下面讨论的故事就是一个完美的解决方案,当然了,采用下面方案对于重型应用或者固件级的优

图标选购网址:http://www.iconfont.cn/ 1.从阿里妈妈网站选购好小图标,加入购物车,下载好文件: 2.把字体文件放入字体(font)文件夹(tff)(woff),(eot) 3.样式表里面引入以下内容(../font 这个是根据相对路径做出相应的选择) @font-face {font-family: 'iconfont';     src: url('../font/iconfont.eot'); /* IE9*/     src: url('../font/iconfo

一.前言 说起Iconfont,对大多数人来说可能不是什么新的技术了,现在好多大网站已经开始使用Iconfont.博主今天主要是简单说一下它的使用方法,聊聊使用它时可能遇到哪些坑,不熟悉的同学可以简要看一下,资深了解的同学,如果发现问题,还请指正. 二.什么是Iconfont 有的同学可能会问什么是Iconfont ? 其实,Iconfont 就是指用字体文件取代图片文件,来展示图标.特殊字体等元素的一种方法. 那么哪些网站在用它呢?有什么优缺点?以及如何使用它,接下来我们一一解答这几个问题.

最近在学习 AIOSO(Alibaba Internal Open Source Organization,即阿里巴巴内部开源组织) 的一个子项目MMCherryUI,这是一个流式布局,可以在运行时做动态改变子元素的个数(增删查改), 并内建动画效果,先贴一张效果图出来 我们学习代码,最重要的就是动手实践.于是,我想自己去实现一个类似上面效果的页面.首先,我需要页面上的几张 icon 图标,去哪里找?上 iconfont.cn 找,里面的 icon 最全了.这时候我脑子里浮现了一个问题,我是使用

前言 像素完美(Pixel Perfection).分辨率无关(Resolution Independent)和多平台体验一致性是设计师们的追求. 可访问性(Accessability).加载性能和重构灵活性是前端工程师们关心的主题. 当下互联网设备「风起云涌」,显示分辨率「层出不穷」,为 Web 创建者们带来越来越多的难题. 需要为高PPI(aka Retina)显示设备准备@1.5x.@2x.@3x的图片素材: 需要针对不同显示屏分辨率来调整优化排版: 需要考虑多个分辨率版本的图片的加载性能

图标字体  iconfont 这是一种字体,它跟svg 有很大 相似点   它是矢量的,放大缩小不失真的.很且很小. 我们把它成字看来. 字体 在 从ie4就开始支持的.  兼容性很好 唯一麻烦的地方,就是制作麻烦. 越来越的网站开始运用这个图标字体. 一些地方,我们就不用精灵图片,直接用图标字体. 图标字体的使用 自己制作比较麻烦,我们一般是网上直接下载,因此,要使用iconfont字体一共分为三步: 1. 先从网上下载字体.     经常使用的两个网站: icomoon.io http://

1.阿里巴巴矢量图网址:www.iconfont.cn 2.然后用新浪微博账号登录 3.输入要查找的图标相应的关键字,回车 4.滑过要找的图标,点击购物车,让图标存储到暂存架中 5.点击暂存架,存储为新的项目 6.输入项目名,就会跳转到项目管理界面 7.然后点击下载到本地就会生成一个iconfont.zip的文件包 8.解压后,将iconfont.eot.iconfont.svg.iconfont.ttf.iconfont.woff等几个字体文件复制到真实的项目环境css目录(与iconfont

1.附阿里图标库链接:http://www.iconfont.cn/ 2.登录阿里图标库以后,搜索我们需要的图标,将其加入购物车,如图3.将我们需要的图标全部挑选完毕以后,点击购物车图标4.这时候右侧会出现一个预览窗口,显示我们前面加入购物车的那些图标,我们选择页面中的下载代码 5.查看一下我们的下载包里面都有什么文件 6.使用fontclass方式其实在下载的文件里面demo_fontclass里面说的已经很详细了,我们在此基础上,再说明一下. 6.1font-class是unicode使用方

前言: 在项目开发中,不免在标签栏,工具栏等应用各种各样的小图标. 然后老旧的做法就是要UI设计出各种图标并生成图片给到我们,但是这样就存在了一个问题,每次请求页面的时候就需要发送请求请求图片,这样不免就增加了http的请求,加大了页面的载入速度,再则图片数量的增多也加大了服务器的压力. 现在,我们可以通用应用iconfont,阿里巴巴的图标库: http://www.iconfont.cn/ 直接获取满足需求的各种小图标,并且满足各种格式的转换,字体,图标等.可以通过字体的方式在页面中绘制出图

字库使用必备三步骤 第一步:使用font-face声明字体 @font-face {font-family: 'iconfont'; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff') format('woff'), /* chrome.firefox */ url('iconfont.t

在iOS的开发中,各种图标的使用是不可避免的,如果把全部图标做成图片放在项目中,那么随着项目的逐渐庞大起来,图片所占的地方就会越来越大,安装包也就随之变大了,如果图标需要根据不同的场景改变使用不同的颜色,那么,如果做成图片就需要多张不同颜色的图片,对于能更换皮肤的APP来说,安装包也就会更大,为了让APP的安装包瘦身,iconfont就产生了.关于iconfont的介绍与制作方式就暂时不进行介绍了. 第一步:获取iconfont文件. 公司会有UI做图,让他们提供文件就好了,如果自己学习测试或者

今天用iconfont遇到了字体图标的使用问题.关于使用字体图标的方式在这里有介绍三种方式(css和js的引入和平时一样) 首先你要分清是用单个字体图标icon,还是多个字体图标icon 关于使用代码的下载方式(一般都是使用多个字体图标) 单个字体图标icon: 一:搜索你想要的字体图标: 二:添加到图库 三:下载代码 下载该图标库的代码到本地,代码包括demo的html和css文件.iconfont的css.js以及各种字体文件,demo是使用说明,iconfont文件是使用这个图标库所必须的

一.准备阶段: a.进入阿里巴巴矢量图标库www.iconfont.cn挑选所需的图标,加入购物车 b.点击网页中的购物车下载代码 二.3种方法实现 Iconfont 的HTML显示 Unicode 引用 Unicode 是字体在网页端最原始的应用方式,特点是: 兼容性最好,支持 IE6+,及所有现代浏览器. 支持按字体的方式去动态调整图标大小,颜色等等. 但是因为是字体,所以不支持多色.只能使用平台里单色的图标,就算项目里有多色图标也会自动去色. 注意:新版 iconfont 支持多色图标,这

IconFont的使用 Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载.在线存储.格式转换等功能.阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具. https://www.iconfont.cn/ IOS使用 IOS可以直接使用单个icon(svg,png).也可以直接引入字体应用: 第一步:将您从IconFont平台下载的字体文件(.ttf)添加到工程中: 打开Info.plist文件,增加一个新的Array类型的键,键名设置为UIAppFonts(Font