iconfont矢量图标库如何在网页中使用呢

iconfont矢量图标库如何在网页中使用呢

大家都知道现在移动端网站设计比较热门，由于移动端的网站页面的收缩性要求很高，必然在网页设计中，一些小点的图标，使用图片收缩性，以及美观上并不是很理想；下面给大家分享一下iconfont矢量图标（字符图片）如何在网页中使用

首先，必须在css声明，需要添加这段：

@font-face {font-family: 'iconfont'; 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- */}.facefont{font-family:"iconfont"; font-style:normal; font-size:16px;}

图片生成可以到阿里巴巴矢量图片库，生成，或者下载免费的；下载下来上面的声明路径要到你缩放的目录；

在html中调用的时候要对应iconfont矢量图标的字符编号哦！这个您可以在下载，或者自己制作iconfont图标的时候，看到；

这样子就可以了，iconfont图标可以加样式控制哦，大小颜色；实用吧！界面美观的好多