iconfont网站 http://www.iconfont.cn(推荐) http://fontello.com/ http://fontawesome.io/   https://icomoon.io/

最近的项目使用了图标库,使我对小小的图标有了更深一步的认识。刚开始项目使用了fontawesome图标库,但由于很多跟UI设计的独特图标不一致,最终决定做一个本项目的专用图标库。一段时间内两个图标库会共存,以后逐步替换成自己的图标库。

在阿里iconfont上传ui的svg图建立了该项目的图标专用库。这个还是蛮好用的。http://www.iconfont.cn(推荐)

它可以上传自己的图标,可以收藏,可以建立项目,添加项目小组成员。

它有三种使用方法:

1.unicode码

复制生成的代码:@font-face {font-family: 'iconfontyyy'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfontyyy') format('svg'); }

自定义样式class名:.iconfontyyy{ font-family:"iconfontyyy" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}

页面结构:<i class="iconfontyyy">3</i>

2.font-class

编辑之后样式自动生成:例如http://at.alicdn.com/t/font_9cd26v04g9pgy14i.css 注意,每次更新图标的样式后路径都要重新替换一次,因为每次的修改生成的样式的名字都是不一样的

使用:a.复制并引入该css样式链接,b.页面结构:<i class="iconfontyyy icon-xxx"></i>, 加上该图标的class名

3.symbol(svg图,支持不同颜色,仅支持ie9+,渲染svg性能比png稍差)

编辑之后js自动生成:例如http://at.alicdn.com/t/font_1473319176_4914331.js注意,每次更新图标的后路径都要重新替换一次

使用:a.复制并引入该js链接

b.通用的css代码:例如.icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }

c.页面结构:<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>

icon fonts的更多相关文章

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

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

  2. 响应式Web图形篇 —— icon fonts 的探析及应用

    前言 像素完美(Pixel Perfection).分辨率无关(Resolution Independent)和多平台体验一致性是设计师们的追求. 可访问性(Accessability).加载性能和重 ...

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

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

  4. icon fonts generator & svg

    icon fonts generator https://icomoon.io/app/#/select https://icomoon.io/ http://fontastic.me/ http:/ ...

  5. icon fonts入门

    iconfont网站 http://www.iconfont.cn(推荐) http://fontello.com/ http://fontawesome.io/   https://icomoon. ...

  6. 把UI图里的小图标制作成icon font

    一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标,本 ...

  7. :after和:before中的content(放入icon)

    作者:zccst 最近见到一种图标写在content里的用法,觉得很新奇.查了一下是webfont. 问题:以下是我看到的一段css的源代码,其实就是在分享到为微博的时候的图标 a#end_cc, a ...

  8. 带你优雅的使用 icon

    前言 本篇文章其实陆陆续续写了快半年,主体部分写好了很久了,但由于种种原因一直没有发布.首先来说说写这篇文章的主要初衷是:在做前端后台项目的时候经常会用到很多 icon 图标,刚开始还好,但随着项目的 ...

  9. CSS3与页面布局学习总结(五)——Web Font与Sprite

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

随机推荐

  1. 20145205 实验一 Java开发环境的熟悉

    实验内容 命令行下Java程序开发 IDEA下Java程序开发.调试 练习(通过命令行和Eclipse两种方式实现,在Eclipse下练习调试程序) 实现凯撒密码,并进行测试 实验要求 使用JDK编译 ...

  2. 四则运算之Right-BICEP测试

    Right-结果是否正确? 正确 B-是否所有的边界条件都是正确的? Conformance(一致性):值是否和预期的一致  是一致的 Ordering(顺序性):值是否如应该的那样 是 是有序或者无 ...

  3. C %p

    格式控制符“%p”中的p是pointer(指针)的缩写.指针的值是语言实现(编译程序)相关的,但几乎所有实现中,指针的值都是一个表示地址空间中某个存储器单元的整数.printf函数族中对于%p一般以十 ...

  4. spring mvc controller间跳转 重定向 传参 (转)

    转自:http://zghbwjl.blog.163.com/blog/static/12033667220137795252845/ 1. 需求背景     需求:spring MVC框架contr ...

  5. Mysql 数据库之修改标的结构

    比如我们新建一user表 create table user( id int unsigned auto_increment primary key, name varchar(60) not nul ...

  6. Intellij IDEA如何使用Maven Tomcat Plugin运行web项目(转)

    首先,Run --> Edit Configurations,这时候如下图: 然后点击左上角的加号,可以添加一个新的配置,如下图: 选择Maven,如下图: 下面填上自己的配置信息,点击appl ...

  7. (。・・)ノ~java常见错误

    空指针错误 刚开始接触数组的时候,最容易出现的错误就是空指针错误.所谓空指针错误就是,一个引用指向了一个空的地址,而空的地址,没有地址,更没有数据,这时候用这引用去和别的数据对比,显然要出错.为了避免 ...

  8. JavaScript对象属性(二)

    对象object  例子一: var car = { "wheels":4, "engines":1, "seats":5}; 例子二: v ...

  9. java中的访问修饰符

    Java有四种访问权限,其中三种有访问权限修饰符,分别为private,public和protected,还有一种不带任何修饰符.其中package代表缺省的访问权限,具体到代码中就是不写任何修饰符的 ...

  10. WordPress基础:固定链接的设置

    安装wordpressp后的工作之一最好修改固定链接,原因就是wp默认的/?p=123形式不利于搜索引擎优化而且也不美观. URL结构参数说明:%year%:日志发表的年份,如2009%monthnu ...