如何在微信小程序中使用iconfont图标 & 小程序模板的调用

iconfont使用
和之前使用方式一样,在iconfont上复制项目的Unicode代码,获取各个icon的代码值,黏贴到全局app.wxss上,即可使用
/*iconfont*/
@font-face {
    font-family: 'iconfont';  /* project id 716728 */
    src: url('//at.alicdn.com/t/font_716728_tmrzrsks9k.eot');
    src: url('//at.alicdn.com/t/font_716728_tmrzrsks9k.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_716728_tmrzrsks9k.woff') format('woff'),
    url('//at.alicdn.com/t/font_716728_tmrzrsks9k.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_716728_tmrzrsks9k.svg#iconfont') format('svg');
}
.iconfont {
    font-family:"iconfont" !important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-time:before { content: "\e632"; }

wxss 样式引用
可以自定义一个common文件夹,存放pop.wxss等各种wxss文件,通过@import引用,如下
@import "../../__wuBaseWxss__/1.wxss";

wxml 公用模板调用
新建一个template文件夹来存放项目中的所有模板,在需要引用的页面中添加如下代码。
一个wxml文件中可以定义多个模板,只需要通过name来区分

is属性后面跟上该name,则调用该模板,data用来传递数据。

<import src="../template/footer.wxml"></import>
<template is="footer" data="{{footer:footer}}"></template>
如:footer
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值