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>
上一篇:【转】20个Cydia常见错误问题解决方法汇总


下一篇:用移动智能设备访问Ossim系统