ionic3使用第三方图标

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>