zoukankan      html  css  js  c++  java
  • 微信小程序使用阿里图标

    微信小程序不支持外联阿里图标,必须下载放入小程序的本地文件中。

    步骤一:下载项目图标

    步骤二:转换iconfont.ttf文件(小程序的wxss文件的font-face的url不接受http地址作为参数,但可以接受base64,因此需将字体文件下载后,转换为base64。用网址https://transfonter.org/转换)

    转换成功后会得到三个文件demo.html、iconfont.ttf、stylesheet.css。

    步骤三:把转换成功的文件放入微信小程序

    这是我项目的部署文件 static(静态文件,存放images、css)

    把stylesheet.css改成stylesheet.wxss

    建立一个文件iconfont.wxss(等下会有用,不建立关系也不大,看自己需求)

    iconfont.wxss代码

    @import "stylesheet.wxss";
    @font-face {
      font-family: 'iconfont';
      src: url('/lib/iconfont.eot');
      src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
    }
    .iconfont{
      font-family: "iconfont" !important;
      font-size: 12px;
      font-style: normal;
    }
    
    .icon-home:before{content:'e613';}
    .icon-home1:before{content:'e7a3';}
    .icon-gouwuche:before{content:'e60c';}
    .icon-gouwuche1:before{content:'e602';}
    .icon-huiyuan:before{content:'e664';}
    .icon-huiyuan1:before{content:'e714';}
    
    
    .icon-daifukuan:before{content:'e610';}
    .icon-yiwancheng:before{content:'e616';}
    
    .icon-daifahuo:before{content:'e61d';}
    .icon-daishouhuo:before{content:'e663';}

    建立这个文件的目的是把 阿里图标所有相关文件都在这个文件里处理,其他文件只需要调用这个confont.wxss即可

    项目调用

    index.wxss调用

    /* 阿里图标样式*/
    @import "/static/ali-icon/iconfont.wxss"; 

    index.wxml调用

    <text class="iconfont icon-gouwuche"></text>

    注意:微信小程序使用阿里图标的时候会报错,应该是不兼容问题;不过并不影响正常使用图标。

  • 相关阅读:
    shell编程系列5--数学运算
    qperf测量网络带宽和延迟
    使用gprof对应用程序做性能评测
    [转]极不和谐的 fork 多线程程序
    Emacs显示光标在哪个函数
    Iterm2的一些好用法
    [转]最佳日志实践
    Deep Introduction to Go Interfaces.
    CGo中传递多维数组给C函数
    seaweedfs 源码笔记(一)
  • 原文地址:https://www.cnblogs.com/wesky/p/7593115.html
Copyright © 2011-2022 走看看