收藏
回答

icon和base64图标无法显示问题

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug icon 客户端 6.6.2 2.2.3

在wxss中引入base64图标的代码界面中的class引入对应的文件名,如:

class="iconfont icon-xuesheng" ,但是界面中却无法显示对应的图标,包括icon组件也会出现一些问题,

有时候显示,偶然又不显示,如下图:

正常情况如下图:


偶然会出现如下图:ISO 9.3.3版本


无法显示icon图标的样式;

在IOS9.3.3大部分可以显示,有时无法显示,用其他的IOS11.4.1和IOS12.0..上没有问题,是否是IOS的版本低导致的,求大神解释下,感激不尽。。。。。。。


最后一次编辑于  2018-08-20  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

23 个回答

  • 是柿子啊
    是柿子啊
    2018-08-20

    你好,请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-08-20
    赞同
    回复 4
    • 陈yob
      陈yob
      2018-09-05


      2、php


      3、为啥跳转的时候就变成这样了,然后 小程序里面是没有问题,但是 php 里面内容没有解析,直接返回去了


      3.1、网页版


      3.2、小程序


      2018-09-05
      赞同
      回复
    • Smile、冷
      Smile、冷
      2018-09-06回复陈yob

      微信联系

      2018-09-06
      赞同
      回复
    • 陈yob
      陈yob
      2018-09-13回复Smile、冷

      1、wxml



      2、wxss和结果展示(明明有很多空间呀,而且 我也写了 宽,为啥 红色的view 硬是要撑那么宽? 真机上直接比手机屏幕海大, 可以“左右滑动”233333 。以为小程序有问题,重启各种也不行,还望各位指教一二)




      2018-09-13
      赞同
      回复
    • Smile、冷
      Smile、冷
      2018-09-13回复陈yob

      查一下rpx与px的区别 ,获取手机的宽度是px的,width属性最好不要在wxss中写rpx,不同的手机的width就不一样了

      2018-09-13
      赞同
      回复
  • Smile、冷
    Smile、冷
    2018-08-20

    手机型号:iPhone 6s

    IOS版本:9.3.3

    微信版本:6.7.1

    代码片段:

    wechatide://minicode/m1iBQOmy7D1O

    2018-08-20
    赞同
    回复 15
    • 陈yob
      陈yob
      2018-08-31

      1、wxml


      2、wxss



      3、显示效果,想问下为啥  搜索的 icon  出不来呢? 还望多多指教


      2018-08-31
      赞同
      回复
    • Smile、冷
      Smile、冷
      2018-08-31回复陈yob

      <icon type="search" size="20"></icon>

      size的值是数字,不是像素表示


      2018-08-31
      赞同
      回复
    • 陈yob
      陈yob
      2018-08-31回复Smile、冷

      都一样的哦。别人说 input 是原生组件,显示层级最高,我觉得很有道理。


      想问一下,这种效果怎么实现??


      2018-08-31
      赞同
      回复
    • Smile、冷
      Smile、冷
      2018-08-31回复陈yob

      <view class="page">

      <view class="page__bd">

      <view class="weui-search-bar">

      <view class="weui-search-bar__form">

      <view class="weui-search-bar__box">

      <icon class="weui-icon-search_in-box" type="search" size="14"></icon>

      <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />

      <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">

      <icon type="clear" size="14"></icon>

      </view>

      </view>

      <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">

      <icon class="weui-icon-search" type="search" size="14"></icon>

      <view class="weui-search-bar__text">搜索</view>

      </label>

      </view>

      <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>

      </view>

      <view class="weui-cells searchbar-result" wx:if="{{inputVal.length > 0}}">

      <navigator url="" class="weui-cell" hover-class="weui-cell_active">

      <view class="weui-cell__bd">

      <view>实时搜索文本</view>

      </view>

      </navigator>

      <navigator url="" class="weui-cell" hover-class="weui-cell_active">

      <view class="weui-cell__bd">

      <view>实时搜索文本</view>

      </view>

      </navigator>

      <navigator url="" class="weui-cell" hover-class="weui-cell_active">

      <view class="weui-cell__bd">

      <view>实时搜索文本</view>

      </view>

      </navigator>

      <navigator url="" class="weui-cell" hover-class="weui-cell_active">

      <view class="weui-cell__bd">

      <view>实时搜索文本</view>

      </view>

      </navigator>

      </view>

      </view>

      </view>



      css:

      .searchbar-result{

      margin-top: 0;

      font-size: 14px;

      }

      .searchbar-result:before{

      display: none;

      }

      .weui-cell{

      padding: 12px 15px 12px 35px;

      }



      .weui-search-bar{position:relative;padding:8px 10px;display:-webkit-box;display:-webkit-flex;display:flex;box-sizing:border-box;background-color:#efeff4;border-top:1rpx solid #d7d6dc;border-bottom:1rpx solid #d7d6dc}



      .weui-icon-search{margin-right:8px;font-size:inherit}

      .weui-icon-search_in-box{position:absolute;left:10px;top:7px}.weui-search-bar__text{display:inline-block;font-size:14px;vertical-align:middle}

      .weui-search-bar__form{position:relative;-webkit-box-flex:1;-webkit-flex:auto;flex:auto;border-radius:5px;background:#fff;border:1rpx solid #e6e6ea}

      .weui-search-bar__box{position:relative;padding-left:30px;padding-right:30px;width:100%;box-sizing:border-box;z-index:1}


      .weui-search-bar__input{height:28px;line-height:28px;font-size:14px}.weui-icon-clear{position:absolute;top:0;right:0;padding:7px 8px;font-size:0}

      .weui-search-bar__label{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;border-radius:3px;text-align:center;color:#9b9b9b;background:#fff;line-height:28px}

      .weui-search-bar__cancel-btn{margin-left:10px;line-height:28px;color:#09bb07;white-space:nowrap}


      2018-08-31
      赞同
      回复
    • Smile、冷
      Smile、冷
      2018-08-31回复陈yob

      试试刚才的代码,css自己优化,icon标签与input标签确实存在层级问题

      2018-08-31
      赞同
      回复
    查看更多(10)
  • 胡夏mei
    胡夏mei
    2018-08-22

    楼主解决了么

    2018-08-22
    赞同
    回复 1
    • Smile、冷
      Smile、冷
      2018-08-22

      只在Iphone9.3.3 的版本上有所体现,其余的机型没什么问题,解决的办法是,将图标替换为小程序本地的图标,以image标签显示图标可以解决

      2018-08-22
      赞同
      回复