1. 第一步。准备svg格式图片
2. 登陆http://iconfont.cn/网站，上传图标.
3. 选中需要制作成iconfont的图标。
4. 将选中的图标转储为项目
5. 下载至本地。
6. 使用：
a. 引入下面四个文件
b. 添加css到css文件内
1 @font-face {font-family: "iconfont"; 2 src: url('iconfont.eot'); /* IE9*/ 3 src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 4 url('iconfont.woff') format('woff'), /* chrome, firefox */ 5 url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 6 url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ 7 } 8 9 .iconfont { 10 font-family:"iconfont" !important; 11 font-size:16px; 12 font-style:normal; 13 -webkit-font-smoothing: antialiased; 14 -webkit-text-stroke-width: 0.2px; 15 -moz-osx-font-smoothing: grayscale; 16 }
/* content的内容为生成的iconfont文字编码， */ 17 .icon-meiriyiti:before { content: "e600"; } 18 .icon-xiaobaobiao:before { content: "e601"; } 19 .icon-dabaobiao:before { content: "e602"; }
c: html内引用有两种方式。
c1: <i class="icon iconfont"></i>
c2: <i class="icon icon-meiriyiti"></i>