一、在小程序中引入iconfont

1.在官网搜索需要的图标

2.将图标添加至项目

3.打开我的项目

4.选择font class，点击下方的链接，打开生成的源码

5.在styles文件夹下新建iconfont.wxss，拷贝生成的源码到该文件中

二、编写登录注册页面

.wxml文件：

<view style="margin-top:40%"><form bindsubmit="submit"><view class="form_item" style="margin-bottom: 20px;"><i class="iconfont icon-user"></i><input type="text" placeholder="用户名" /></view><view class="form_item" style="margin-bottom: 40px;"><i class="iconfont icon-password"></i><input type="password" placeholder="密码" /></view><view><button class="login_btn">登录</button><button>注册</button></view></form>
</view>

.less文件：

@formItemHeight: 36px;@themeColor: rgb(50, 100, 192);.form_item {margin: 0 50rpx;height: @formItemHeight;border: 1px solid @themeColor;border-radius: 5px;i {float: left;height: @formItemHeight;margin: 0 5px;font-size: 20px;color: @themeColor;line-height: @formItemHeight;}input {float: left;height: @formItemHeight;}}.login_btn {background: @themeColor;color: white;margin-bottom: 15px;
}

三、实现效果