关于@font-face及svg

    今天打算做一个电商的首页，感觉1号店的首页还不错，那就模仿它吧，

没想到一上来就给了我一棒槌，就这个最上端的的送货地址是咋弄出来的呢？把我给难住了，经过搜索，思考终于给搞定了。

第一眼看到这个，我没感觉太难，我知道它是一个字体图标而已，所以我先从1号店吧字体图标下载了下来，但是就几个字体图标文件，怎么用呢？

【第一步】在css文件中引入这些字体图标

@font-face {
	font-family:'iconfonts';
	src:url("../iconfonts/iconfonts_new.eot");
	src:url("../iconfonts/iconfonts_new.eot?#iefix") format("embedded-opentype"),
		url("../iconfonts/iconfonts_new.woff") format("woff"),
		url("../iconfonts/iconfonts_new.ttf") format("truetype"),
		url("../iconfonts/iconfonts_new.svg#uxiconfonts") format("svg")
}

然后再定义样式，并用上该字体样式即可，也没啥难度

.hd_iconfonts {
	font-family: "iconfonts" !important;
	font-size: 14px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: .2px;
	-moz-osx-font-smoothing: grayscale
}

【第二步】难点来了

怎么解析svg字体图标文件，如何知道每个icon图标对应的字体编码呢？

【推荐这个网站】https://icomoon.io/app/#/select

打开网站之后，点击这个【import icons】，选择svg字体图标，然后就可以预览svg字体图标的内容了，如下：

接下来，随意点击几个图标，然后再点击右下方的【generate font】，如图所示

这样就可以得到字体图标对应的编码信息了，得到这个编码有啥用呢？

我也用的不太熟，以葫芦画瓢吧，参照【bootstrap】的写法

.icon-dress:before{
	content: "\e633";
}
.icon-youjiantou:before{
	content: "\e644";
}
.icon-love:before{
	content: "\e63e";
}

css搞定，然后在html页面引用一下，看一下图标能出来不：

哎呀，还真出来了，搞定了，好开心，程序猿就这点追求！！哈哈