ionic3的自定义图标引入

引入步骤

  • 从阿里巴巴矢量图标库导出字体文件夹
    • 将图标添加至购物车,点击购物车添加至项目
    • 在项目里直接下载
    • 会将所有的图标下载下来
  • 解压下载文件,将所有带iconfont的文件(js有时不需要)放入项目中
    • 在src/assets下边建一个fonts文件夹将文件放入这里
    • 然后将下载文件中附带的iconfont.css文件里的东西放入路径为src/app/app.scss的文件里(需要更改下边有解释)
    • 也可以不放进里边,只需要将该iconfont.css文件重命名为scss文件,然后在src/app/app.scss里边导入该文件
    • @import ‘../assets/fonts/iconfont.scss’;(导入)
  • 将文件导入项目后,需要对iconfont.scss也就是iconfont.css文件里边的内容进行修改。(修改如下)
//这个@font-face是你一次所下载的文件里所有图标的数据,如果下载了多次可以导入多个这个,下边的名字同样需要修改
@font-face {//这个就是导入的文件数据
  font-family: "Ionicons";//这里需要修改为这个名字(为了还可以使用ionic自带的图标) 
  src: url('iconfont.eot?t=1505467226459'); /* IE9*/
  src: url('iconfont.eot?t=1505467226459#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
  url('iconfont.ttf?t=1505467226459') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('iconfont.svg?t=1505467226459#iconfont') format('svg'); /* iOS 4.1- */
}

//不同与@font-face不管下载多少次图标,永远只需要引入一次这个  (毕竟一个是数据,一个是公用类名)
.icon {//这个类名也必须改为这个,为了还继续使用ionic的原图标   
  font-family: "Ionicons" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



//.icon-PKdailianchang:before { content: "\e979"; }

//.icon-workslist:before { content: "\e647"; }
//原文件是上边这两个,为了适应ionic需要改为下边这两个
// 这里之所以是两个是因为我就下载了两个图标,根据需求下载几个图标就需要从写几次。名字自己看着改,单前缀不去掉
.ion-md-pk:before,
.ion-ios-pk:before,
.ion-ios-pk-outline:before {
  content: "\e979";
}

.ion-md-works:before,
.ion-ios-works:before,
.ion-ios-works-outline:before {
  content: "\e647";
}


对了,@font-face里的数据来源于之前引入的其他文件,但是当多次在阿里下载时它的命名是一样的,所以当再次引入图标时需要更改文件名。同时需要在新引入的@font-face里的url里更改名字。
  • 之后直接使用就可以了
<ion-tabs>
    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="works"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="pk"></ion-tab>
    <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值