ionic2 中使用iconfont

本文详细介绍如何在Ionic-Angular项目中配置和使用IconFont图标字体,包括字体文件的放置位置、SCSS中字体文件的声明方式以及图标的具体使用方法。

1. 在 主目录\node_modules\ionic-angular\fonts放入需要使用的iconfont字体文件

2. scss中申明字体文件(新建scss后别忘记引用 参考

```

@font-face {font-family: "iconfont";src: url('../fonts/iconfont.eot'); /* IE9*/src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('../fonts/iconfont.woff') format('woff'), /* chrome, firefox */url('../fonts/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('../fonts/iconfont.svg') format('svg'); /* iOS 4.1- */}.iconfont {font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}

```

3.使用图标

```

<i class="iconfont"></i>

```



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值