阿里巴巴iconfont正确的使用方式

发表于2016-05-26 13:31:56

1.首先在Iconfont-阿里巴巴矢量图标库上面将你需要的图标点击购物车按钮加入“暂存架”;

.2.选择完所有要用的图标后“存储为项目”,给它命名。然后在“项目图标管理”-“项目管理”中找到这个项目,获取在线链接,把里面的代码复制到CSS中。

3.在HTML中需要使用到图标时,使用iconfont类名。

<i class="iconfont"></i>

里面写上你想用的图标下面的Unicode:

4.然后你可以通过控制iconfont类的属性改变图标的样式,比如:

.iconfont{
        font-family:"iconfont";
        font-size:16px;
        font-style:normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale; 
        padding-left:20px
}

就可以在页面中引用和修改了。
注意:浏览的时候不能在本地浏览的,我是通过在线的方法把iconfont引进来的,也可以下载到本地使用

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@font-face {
				font-family: 'iconfont';
				src: url('//at.alicdn.com/t/font_1462953902_774078.eot');
				/* IE9*/
				src: url('//at.alicdn.com/t/font_1462953902_774078.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
				url('//at.alicdn.com/t/font_1462953902_774078.woff') format('woff'), /* chrome、firefox */
				url('//at.alicdn.com/t/font_1462953902_774078.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
				url('//at.alicdn.com/t/font_1462953902_774078.svg#iconfont') format('svg');
				/* iOS 4.1- */
			}			
			.iconfont {
				font-family: "iconfont";
				font-size: 16px;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-webkit-text-stroke-width: 0.2px;
				-moz-osx-font-smoothing: grayscale;
				padding-left: 20px
			}
		</style>
	</head>
	<body>
		<i class="iconfont"></i>
		<i class="iconfont"></i>
	</body>

</html>


评论(0)

请先登录后再评论,如果没有账号请先注册

发表评论