iconfont-字体图标

发表于 | 更新于: | 分类于

Alt text

一、选择icon

(一)打开阿里巴巴iconfont 寻找自己想要使用的icon 并点击添加到购物车

Alt text

(二)打开购物车 并点击添加至项目 如果没有项目可以创建一个

Alt text

(三)打开项目 并点击查看在线链接 复制引用代码

Alt text

二、使用icon

(一)将复制的代码放到你的stye.css文件里，并加上 http: 前缀

1
2
3
4
5
6
7
8
@font-face {
	font-family: 'iconfont';  /* project id 746807 */
	src: url('http://at.alicdn.com/t/font_746807_o0xx0uv1z1.eot');
	src: url('http://at.alicdn.com/t/font_746807_o0xx0uv1z1.eot?#iefix') format('embedded-opentype'),
	url('http://at.alicdn.com/t/font_746807_o0xx0uv1z1.woff') format('woff'),
	url('http://at.alicdn.com/t/font_746807_o0xx0uv1z1.ttf') format('truetype'),
	url('http://at.alicdn.com/t/font_746807_o0xx0uv1z1.svg#iconfont') format('svg');
}

(二)html结构

1
<i class="iconfont icon-home"></i>

(三)设置iconfont样式

1
2
3
4
5
6
7
.iconfont {
	font-family: iconfont!important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

(四)设置icon-home样式

1
2
3
icon-home:before {
	content: '\e602';  //内容的就是icon代码的后四位
}

三、注意事项

如果你复制完代码后又重新选择了几个icon，网站会提示你(新icon来袭 点击更新代码),一定不要忘记点击更新代码。