1.打开阿里图标库http://www.iconfont.cn
2.找到自己所需的图标，加入购物车（免费使用的）
3.打开购物车，点击右下角（下载代码）
4.解压文件，打开demo_unicode.html文件，里面有具体用法
下面是集成到ionic项目中用法
1.在./src/assets文件中，新建文件夹fonts
2.把iconfont.eot,iconfont.svg,iconfont.ttf,iconfont.woff4个文件拷贝到fonts目录下
3.在./src/app/app.scss文件编写如下样式代码
@font-face {
font-family: "Ionicons";
src: url('../../assets/fonts/iconfont.eot'); /* IE9*/
src: url('../../assets/fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../../assets/fonts/iconfont.woff') format('woff'), /* chrome, firefox */
url('../../assets/fonts/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('../../assets/fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"Ionicons" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.ion-md-alipay:before{
content:'\e624';
color:blue;
}
.ion-md-wxpay:before{
content:'\e622';
color: green;
}
其中content:'图标的unicode代码'
4.项目里就可以这样引用图标了
<ion-icon name="alipay"></ion-icon>
5.或者直接普通写法
<i class="icon iconfont ion-md-alipay"></i>