ionic项目中使用自定义图标

Posted 2020-10-08 wanzhouyi

原文：http://bbs.phonegap100.com/forum.php?mod=viewthread&tid=3941&ordertype=1

 

ionic自带图标库地址：http://ionicframework.com/docs/v2/ionicons/。由于项目需要，自带图标库可能无法满足需求，此时就需要加载第三方图标库。

这里推荐阿里巴巴矢量图标库：http://www.iconfont.cn/。

1. 搜索想要使用的图标，并添加入库

2. 点击右上角的购物车图标，查看添加的图标

3. 添加至项目，此时需要登录，项目名称随意

4. 下载

5. 在Ionic中使用

在Ionic2项目结构解析中，我们知道可以把一些全局样式添加在 src/app/app.scss 中，资源文件可以放在 src/assets。

在 assets 下新建文件夹 myFont，打开下载好的图库文件，将iconfont.woff、iconfont.ttf、iconfont.svg、iconfont.eot添加到文件夹 myFont。

打开图库文件中的iconfont.css，将代码添加到 src/app/app.scss 并修改路径

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

@font-face {     font-family: "Ionicons";     src: url(‘../assets/myFont/iconfont.eot?t=1481782193096‘); /* IE9*/     src: url(‘../assets/myFont/iconfont.eot?t=1481782193096#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */     url(‘../assets/myFont/iconfont.woff?t=1481782193096‘) format(‘woff‘), /* chrome, firefox */     url(‘../assets/myFont/iconfont.ttf?t=1481782193096‘) format(‘truetype‘), /* chrome, firefox, opera, Safari, android, ios 4.2+*/     url(‘../assets/myFont/iconfont.svg?t=1481782193096#iconfont‘) format(‘svg‘); /* iOS 4.1- */ } .icon {     display: inline-block;     font-family: "Ionicons";     speak: none;     font-style: normal;     font-weight: normal;     font-variant: normal;     text-transform: none;     text-rendering: auto;     line-height: 1;     -webkit-font-smoothing: antialiased;     -moz-osx-font-smoothing: grayscale; } .ion-md-weixin:before, .ion-ios-weixin:before, .ion-ios-weixin-outline:before {     content: "\e603"; }

Note：
1. 修改font-family为Ionicons（为了不影响原来图标的使用）
2. 定义ios时要多定义一个outline

此时在页面中使用一下代码，即可显示微信图标

1	<ion-icon name="weixin"></ion-icon>

修改 src/pages/tabs/tabs.html 如下：

1 2 3 4 5

<ion-tabs>     <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="weixin"></ion-tab>     <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>     <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab> </ion-tabs>

运行项目，即可看到更改后的图标内容

 

经验证，ionic3项目也适用。

 

另外可参考：https://segmentfault.com/a/1190000009288336