PhoneGap中文网

标题: Ionic2中使用第三方图标Iconfont等 [打印本页]

作者: dPary    时间: 2016-12-16 11:54
标题: Ionic2中使用第三方图标Iconfont等
本帖最后由 dPary 于 2016-12-16 11:55 编辑

Ionic2自带图标库地址:http://ionicframework.com/docs/v2/ionicons/。由于项目需要,自带图标库可能无法满足需求,此时就需要加载第三方图标库。
这里推荐阿里巴巴矢量图标库:http://www.iconfont.cn/

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

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

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

4. 下载

5. 在Ionic2中使用

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>



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

原文地址https://dpary.github.io/2016/12/16/Ionic2%E4%B8%AD%E4%BD%BF%E7%94%A8%E7%AC%AC%E4%B8%89%E6%96%B9%E5%9B%BE%E6%A0%87Iconfont%E7%AD%89/

关注公众号:Ionic2 获取更多教程






欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/) Powered by Discuz! X3.2