icon fonts generator https://icomoon.io/app/#/select https://icomoon.io/ http://fontastic.me/ http://fontastic.me/static/video/666f3473.fontastic.ogv SVG to fonts http://app.fontastic.me/ http://app.fontastic.me/#publish/font/RouGzUUMUKk3wrcgy3y42V h…

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

原文: http://www.cnblogs.com/willian/p/4166757.html?utm_source=tuicool&utm_medium=referral How to use icon fonts in your mobile apps 在任何APP设计中实现可图形的矢量缩放最完美的方式是使用字体图标. 移动端的设计变的越来越复杂.原因在于多样的屏幕尺寸与不同的分辨率. Native版APP几乎无法提供像素级别完美的视觉体验. 当我们设计APP界面中各种图标时,我们不得不…

How to use icon fonts in your mobile apps 在任何APP设计中实现可图形的矢量缩放最完美的方式是使用字体图标. 移动端的设计变的越来越复杂.原因在于多样的屏幕尺寸与不同的分辨率. Native版APP几乎无法提供像素级别完美的视觉体验. 当我们设计APP界面中各种图标时,我们不得不面临两方面,好的一面是,使用真实的icons,即使用像素设计出吸引用户的交互界面,这样的交互界面能更好的帮助用户理解和使用你的APP,不太好的一面就是繁琐乏味的“重复工作”.一旦…

iconfont网站 http://www.iconfont.cn(推荐) http://fontello.com/ http://fontawesome.io/   https://icomoon.io/ 最近的项目使用了图标库,使我对小小的图标有了更深一步的认识.刚开始项目使用了fontawesome图标库,但由于很多跟UI设计的独特图标不一致,最终决定做一个本项目的专用图标库.一段时间内两个图标库会共存,以后逐步替换成自己的图标库. 在阿里iconfont上传ui的svg图建立了该项目的图…

注意点: 1. 存储为svg格式(建议使用存储为svg,不要使用导出为svg)2. 图像位置:链接(注意哦,不要点嵌入和保留编辑功能)---确定3. AI里面选中图形,点对象-路径-轮廓化描边 软件编辑要点: 从网站下down下来,记得下  Ai  格式. 使用Ai 进行编辑.( 别用PS软件编辑 ) 否则矢量图图片会被污染,编辑后 再上传 Icon 就会出现下图上传空文件的现象.…

iconfont网站 http://www.iconfont.cn(推荐) http://fontello.com/ http://fontawesome.io/   https://icomoon.io/ 最近的项目使用了图标库,使我对小小的图标有了更深一步的认识.刚开始项目使用了fontawesome图标库,但由于很多跟UI设计的独特图标不一致,最终决定做一个本项目的专用图标库.一段时间内两个图标库会共存,以后逐步替换成自己的图标库. 在阿里iconfont上传ui的svg图建立了该项目的图…

作者:zccst 最近见到一种图标写在content里的用法,觉得很新奇.查了一下是webfont. 问题:以下是我看到的一段css的源代码,其实就是在分享到为微博的时候的图标 a#end_cc, a#twitter, a#weibo {margin: 0 5px;border-bottom: none; } a#end_cc:before, a#twitter:before, a#weibo:before {font-size: 24px;font-family: "fontello"…

原文链接: https://github.com/dypsilon/frontend-dev-bookmarks Frontend Development Looking for something else? Take a look at the awesome collection of other awesome lists. Guides Bento: a collection of guides for web development. Hack Design: An easy to…

一般考虑到webicon 就是cssSprite和自定义font:本文基于下述而总结和进行分析,如有笔误有望指出,谢谢 在线教程:用字体在网页中画ICON图标 http://www.imooc.com/learn/243 免费图标: https://icomoon.io/#home 制作font教程: webfont应用系列(一)位图如何转成矢量?http://ntesmailfetc.blog.163.com/blog/static/206287061201241854857235/ webf…