css3图标库-使用阿里巴巴图标库生成iconfont字体图标

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

Iconfont字体图标使用字体来代替图标和图片文件，但可以通过字体图标来控制图标的大小和颜色，但缺点是只能实现一种颜色，不能像图片那样丰富各种颜色。

通过阿里巴巴图标库制作字体图标的步骤如下（默认已注册阿里巴巴图标库）：

1、首先搜索要显示的图片，找到后点击保存。

2、点击存储图标，结果如右图所示，选择添加到项目中或者点击创建新项目。

3、点击确定后，如右图所示，键盘悬浮在里面，可以选择更改图标信息。

4. 选择“Fontclass”，单击“下载到本地”以编辑字体。

5、结果就是使用字体了，选择生成的字体css3图标库css3图标库，添加到项目工程中。

6.更改css文件引用生成的字体

iconfont.css的内容如下：

	
		
		
		
			@font-face {font-family: "iconfont";
			  src: url('fonts/iconfont.eot?t=1483950473775'); /* IE9*/
			  src: url('fonts/iconfont.eot?t=1483950473775#iefix') format('embedded-opentype'), /* IE6-IE8 */
			  url('fonts/iconfont.woff?t=1483950473775') format('woff'), /* chrome, firefox */
			  url('fonts/iconfont.ttf?t=1483950473775') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
			  url('fonts/iconfont.svg?t=1483950473775#iconfont') format('svg'); /* iOS 4.1- */
			}
			
			.iconfont {
			  font-family:"iconfont" !important;
			  font-size:16px;
			  font-style:normal;
			  color: lightblue;
			  -webkit-font-smoothing: antialiased;
			  -moz-osx-font-smoothing: grayscale;
			}
			
			.icon-xingzuotianchengzuo:before { content: "e672"; }
			
			@font-face {font-family: "iconfont";
			  src: url('fonts/iconfont.eot?t=1483951178754'); /* IE9*/
			  src: url('fonts/iconfont.eot?t=1483951178754#iefix') format('embedded-opentype'), /* IE6-IE8 */
			  url('fonts/iconfont2.woff?t=1483951178754') format('woff'), /* chrome, firefox */
			  url('fonts/iconfont2.ttf?t=1483951178754') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
			  url('fonts/iconfont.svg?t=1483951178754#iconfont') format('svg'); /* iOS 4.1- */
			}
			
			.icon-star:before { content: "e602"; }