【微信小程序】小程序使用彩色iconfont

By Heanny
2020-07-26
54 read

情景再现

在给自己写记账本的时候,发现图片做起来不方便,更新需要重新提交小程序代码,所以打算把卡类型放到数据库,转而使用iconfont作为卡显示

问题

正常的使用iconfont是去色的,平时html使用彩色iconfont也需要小调一下,那么,iconfont怎么使用彩色呢

解决

  1. 先下载自己的项目iconfont
  2. 安装iconfont-tools
    npm i -g iconfont-tools
    
  3. 在项目iconfont解压目录运行iconfont-tools
    iconfont-tools
    
    根据提示一步一步输入或按回车
  4. 然后将输出文件iconfont-weapp-ico.cssiconfont-weapp-ico.wxss复制到你的小程序项目里面,并重命名为.wxss后缀,
  5. 引入并使用
    /* 引入并重新设置大小 */
    /* pages/cards/carditem.wxss */
    @import "/icons/t-icon.wxss";
    .item .t-icon {
    width: 30px !important;
    height: 30px !important;
    }
    
    <!-- 平时使用方法 -->
    <view class="iconfont iconfont-alipay">
    <!-- 转彩色后的使用方法 -->
    <view class="item">
     <label class='t-icon t-iconfont-alipay'></label>
    </view>
    

    感谢iconfont各位提供的icon

flask websocket聊天室
有关CRT密码反编译问题

Comments

暂无评论,还不快来坐沙发...

Leave a Reply