你的位置:首页 > Java教程

[Java教程]矢量图标的使用


前几年已经开始流行icon font,很多项目为了节省网站空间,实现开发时灵活的图标大小和颜色等样式修改都已经采用icon font。css3里面自定义字符(@font-size)已经被各大浏览器支持,即便是古老的IE系列,可得到很好的支持。

基础使用方法

两种方法,一种是在标签上用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="&#x21;" ></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;