微信小程序input標籤中加iconfont

1.首先到阿里圖標（https://www.iconfont.cn/）搜索找到心儀的圖標加入購物車

2.點擊右上角購物車圖標，將圖標加入到項目

3.點擊生成代碼

4.將生成代碼的地址拼上https,在新開頁面打開

5.打開後另存爲wxss文件，移入項目資源目錄下

6.app.wxss全局引入iconfont.wxss文件

@import '/asset/iconfont/iconfont.wxss';

7.在所需頁面使用字體圖標,

將字體圖標的類名填入placeholder-class內即可，後面若需要跟字，就加到placeholder內。

  <view class="seachBox">
    <input placeholder-class="iconfont icon-soushuo seachInput" placeholder=" 請輸入進行搜索"></input>
  </view>

8.附上對應的wxss

.seachBox{
  width: 100%;
  height:120rpx;
  background:#ccc;
  padding:20rpx;
  box-sizing:border-box;
}

.seachBox input{
  border:1rpx solid #ccc;
  background:#fff;
  display: block;
  width: 100%;
  height:100%;
}

.seachInput{
  display: flex;
  justify-content: center;
  align-items: center;
}

最後祝您工作順利，身體健康︿(￣︶￣)︿。