icon fonts入门
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入门的更多相关文章
- 如何在移动端app中应用字体图标icon fonts (转)
原文: http://www.cnblogs.com/willian/p/4166757.html?utm_source=tuicool&utm_medium=referral How to ...
- 响应式Web图形篇 —— icon fonts 的探析及应用
前言 像素完美(Pixel Perfection).分辨率无关(Resolution Independent)和多平台体验一致性是设计师们的追求. 可访问性(Accessability).加载性能和重 ...
- 如何在移动端app中应用字体图标icon fonts
How to use icon fonts in your mobile apps 在任何APP设计中实现可图形的矢量缩放最完美的方式是使用字体图标. 移动端的设计变的越来越复杂.原因在于多样的屏幕尺 ...
- icon fonts generator & svg
icon fonts generator https://icomoon.io/app/#/select https://icomoon.io/ http://fontastic.me/ http:/ ...
- icon fonts
iconfont网站 http://www.iconfont.cn(推荐) http://fontello.com/ http://fontawesome.io/ https://icomoon. ...
- Gulp资料大全:入门、插件、脚手架、包清单
awesome-gulp中文版 一份gulp的资源,插件和使用实例清单, 致力于打造更好的前端工程构建流程. 被老外的awesome 清单刺激到,觉得有必要翻译一份,为国产的程序员们做点事情,本清单将 ...
- SVG Sprite 入门(SVG图标解决方案)
关于浏览器图标解决方案,一直就有很多 CSS Sprite,Icon Font,CSS Icon以及SVG.相对而言svg矢量图标以及支持浏览器自身解析的优点,很多团队都已经在使用了.这篇文章主要说明 ...
- 把UI图里的小图标制作成icon font
一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标,本 ...
- :after和:before中的content(放入icon)
作者:zccst 最近见到一种图标写在content里的用法,觉得很新奇.查了一下是webfont. 问题:以下是我看到的一段css的源代码,其实就是在分享到为微博的时候的图标 a#end_cc, a ...
随机推荐
- qt——QFileDialog使用对话框选取本地文件
QT在学习的过程中总是遇到各种问题,没有人解答,只有自己在研究并且在网上搜索一些资料,从初学到现在入门,一直都是这样走过来的,虽然走得很艰难,但是每一个阶段都会有所收获,最近在做一个图片浏览模块的功能 ...
- .NET、NET Framewor以及.NET Core的关系(二)
什么是CLR,.NET虚拟机? 实际上,.NET不仅提供了自动内存管理的支持,他还提供了一些列的如类型安全.应用程序域.异常机制等支持,这些 都被统称为CLR公共语言运行库. CLR是.NET类型系统 ...
- PAT 1053 Path of Equal Weight[比较]
1053 Path of Equal Weight(30 分) Given a non-empty tree with root R, and with weight Wi assigned t ...
- PAT 1055 The World's Richest[排序][如何不超时]
1055 The World's Richest(25 分) Forbes magazine publishes every year its list of billionaires based o ...
- PAT 1065 A+B and C[大数运算][溢出]
1065 A+B and C (64bit)(20 分) Given three integers A, B and C in [−263,263], you are supposed t ...
- 4.4 Routing -- Specifying A Route's Model
一.概述 应用程序中,templates被models支持.但是templates是如何知道它们应该显示哪个model呢? 例如,你有一个photos模板,它是如何知道它该呈现哪个model呢? 这就 ...
- Winform开发之ComboBox和ComboBoxEdit控件绑定key/value数据
使用 ComboBox 控件绑定key/value值: 因为 ComboBox 是有 DataSource 属性的,所以它可以直接绑定数据源,如 DataTable.ListItem 等. 使用 Da ...
- js 逗号操作符
有一道js面试题,题目是这样的:下列代码的执行结果是什么,为什么? var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; ...
- 比较两个JSON字符串是否完全相等
RT,比较两个JSON字符串是否完全相等,这里使用google贡献的Gson. 一,no POJO,即不另外创建一个简单Java类 [java] view plain copy String str1 ...
- FW: How to use Hibernate Lazy Fetch and Eager Fetch Type – Spring Boot + MySQL
原帖 https://grokonez.com/hibernate/use-hibernate-lazy-fetch-eager-fetch-type-spring-boot-mysql In the ...