矢量图标的使用
2015-11-20 11:58
246 查看
前几年已经开始流行icon font,很多项目为了节省网站空间,实现开发时灵活的图标大小和颜色等样式修改都已经采用icon font。css3里面自定义字符(@font-size)已经被各大浏览器支持,即便是古老的IE系列,可得到很好的支持。
基础使用方法
两种方法,一种是在标签上用data-属性,另外一种是使用class。
首先需要在css文件中引入相关的eot、woff、ttf、svg文件:
src: url('iconfont.eot'); /* 兼容IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* 兼容IE6-IE8 */
url('iconfont.woff') format('woff'),/* 兼容chrome、firefox */
url('iconfont.ttf') format('truetype'),
/* 兼容chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* 兼容iOS 4.1- */
插入一个图标:
上述的html标签,插入即可看到效果。但是对于需要重新通过脚本获取html标签中的data-icon值,需要使用伪元素:before:
插入html标签:
同时需要配合样式:
使用伪元素的好处就是编写html标签时候不需要记住繁琐没有规律的十六进制实体,而是记住icon-group这个class名即可,使得html更具语义化。
由于字体图标会存在半个像素的锯齿,在浏览器渲染的时候会直接显示一个像素,导致在有背景下的图标显示感觉加粗;所以在应用字体图标的时候需要对图标样式进行抗锯齿处理,所以应该对CSS代码设置属性:
基础使用方法
两种方法,一种是在标签上用data-属性,另外一种是使用class。
首先需要在css文件中引入相关的eot、woff、ttf、svg文件:
@font-face { font-family: 'ElegantIcons'; src:url('fonts/ElegantIcons.eot'); src:url('fonts/ElegantIcons.eot?#iefix') format('embedded-opentype'), url('fonts/ElegantIcons.woff') format('woff'), url('fonts/ElegantIcons.ttf') format('truetype'), url('fonts/ElegantIcons.svg#ElegantIcons') format('svg'); font-weight: normal; font-style: normal; } /* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before { font-family: 'ElegantIcons'; content: attr(data-icon); speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
src: url('iconfont.eot'); /* 兼容IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* 兼容IE6-IE8 */
url('iconfont.woff') format('woff'),/* 兼容chrome、firefox */
url('iconfont.ttf') format('truetype'),
/* 兼容chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* 兼容iOS 4.1- */
插入一个图标:
<div class="fs1" aria-hidden="true" data-icon="!" ></div>
上述的html标签,插入即可看到效果。但是对于需要重新通过脚本获取html标签中的data-icon值,需要使用伪元素:before:
插入html标签:
<i class="icon-group"></i>
同时需要配合样式:
.icon-group{ font-family: 'ElegantIcons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } i.icon-group:before{ content:'\e08b'; }
使用伪元素的好处就是编写html标签时候不需要记住繁琐没有规律的十六进制实体,而是记住icon-group这个class名即可,使得html更具语义化。
由于字体图标会存在半个像素的锯齿,在浏览器渲染的时候会直接显示一个像素,导致在有背景下的图标显示感觉加粗;所以在应用字体图标的时候需要对图标样式进行抗锯齿处理,所以应该对CSS代码设置属性:
-webkit-font-smoothing: antialiased;
相关文章推荐
- JAVA 泛型详解二
- 【论文笔记】Beyond frontal faces: improving person recognition using multiple cues
- iOS CGContextRef详解
- JavaScript基础——文档对象模型(DOM)
- Linux -- FresBSD的镜像文件说明
- IP网络5种基本寻址方式 (单播、多播、广播、任播、地域多播)
- linux下json库的编译及例程
- 微信公众号新浪百度云做服务器
- JAVA 泛型详解一
- iOS开发 免证书真机调试
- BBS热点事件探测
- ACE_Event_Handler
- XCode7打包/更新报错
- java技巧--提高代码运行效率
- Epoll 实例
- 数据库之字符串处理SQL语句
- CSS3:nth-child()伪类选择器,奇偶数行自定义样式first-child
- linux程序通过消息队列传输数据
- Android.mk 编写规则简介
- npm Failed to replace env in config: ${proxy}