1. 使用GitHub或其他账号登录iconfont,将我们需要的字体添加购物车,然后再添加到新建的项目中(一个项目里装这个项目的icon即可)。
![](https://img.haomeiwen.com/i15605326/4077051baca748a9.png)
2. 点击查看在线链接,生成代码。
![](https://img.haomeiwen.com/i15605326/18fc1f759050d28d.png)
2. 点击复制此代码,然后新开一个窗口 ,把复制代码放到地址栏打开
![](https://img.haomeiwen.com/i15605326/a6008841d8c2ebd9.png)
里面这些代码,把他复制到app.css
- 如果我们觉得icon的名字不好看,我们可以自定义每个icon的类名。
/*** icon_back是自定义的类名 ***/
. icon_back::before {
content: "\e7a5"
}
然后在html 使用 /*** 注意类名要对应 ***/
<i bindtap='Reply' class="iconfont icon-caidan1" style="font-size:70rpx;color:#8a8a8a;"></i>
<i bindtap='Reply' class="iconfont icon-pingguo" style="font-size:70rpx;color:#8a8a8a;"></i>
<i bindtap='Reply' class="iconfont icon-icon-test1" style="font-size:70rpx;color:#8a8a8a;"></i>
需要注意的是,在项目每添加一个icon,都需要把流程重新走一遍,然后把复制代码放到地址栏打开,把里面的代码复制,黏贴到app.css(覆盖)即可
@font-face{} 这段代码是必须更新的,复制这一段,覆盖到原来的,然后添加
.icon-guanbi-:before {
content: "\e678";
}
@font-face {font-family: "iconfont";
src: url('//at.alicdn.com/t/font_1234178_tnlywyq2os7.eot?t=1566980770089'); /* IE9 */
src: url('//at.alicdn.com/t/font_1234178_tnlywyqx2os7.eot?t=1566980770089#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
url('//at.alicdn.com/t/font_1234178_tnlywyq2os7.woff?t=1566980770089') format('woff'),
url('//at.alicdn.com/t/font_1234178_tnlywyq2os7.ttf?t=1566980770089') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('//at.alicdn.com/t/font_1234178_tnlywyq2os7.svg?t=1566980770089#iconfont') format('svg'); /* iOS 4.1- */
}
网友评论