3回答

好帮手慕星星

2022-04-01

同学你好，解答如下：

1、这边测试代码可以，在iphone11手机上预览没问题

建议多测试几次，或者使用其他型号的手机测试下。

2、字体图标和雪碧图都是实际开发中常用的，看UI设计师是否给雪碧图了。

祝学习愉快！

0

好帮手慕星星

2022-03-30

同学你好，微信小程序中使用本地地址测试有误，所以不建议将font文件引入到app.wxss中。另外如果想在手机预览调试正确，建议换为在线地址，如下：

将官网的这段代码替换掉本地的

然后手机预览再试试。

0

heixin_慕码人7523200

hp>好的。

问题1：老师好，我引用在线字体地址后，搜索框的放大镜在手机仍然不能显示，在微信开发工具是可以显示的，在PC浏览器预览也是是可以显示的，但是在手机预览就是一个小方格，我手机是iPhone，是手机问题吗？怎么才能正常显示？

我的app.wxss是：

@font-face {
  font-family: 'iconfont';
  /* project id 3287928 */
  src: url('');
  src: url('?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_3287928_dkkonlsc8gf.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_3287928_dkkonlsc8gf.woff') format('woff'),
    url('//at.alicdn.com/t/font_3287928_dkkonlsc8gf.ttf') format('truetype'),
    url('#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-31gouwuchexuanzhong:before {
  content: "\e600";
}

.icon-31gouwuche:before {
  content: "\e601";
}

.icon-31shouyexuanzhong:before {
  content: "\e602";
}

.icon-31shouye:before {
  content: "\e603";
}

.icon-31wodexuanzhong:before {
  content: "\e604";
}

.icon-31wode:before {
  content: "\e605";
}

.icon-sousuo:before {
  content: "\e651";
}

.icon-zongrenshu:before {
  content: "\e6a5";
}

index.wxml:

<!-- 搜索框 -->
<view class="search_box">
    <icon wx:if="{{showIcon}}" class="iconfont icon-sousuo" size="24rpx"></icon>
    <input type="text" class="search_input" confirm-type="search" placeholder="AngularJs · MySQL · Java" placeholder-class="placeholder_class" bindinput="searchInput" />
</view>
<!-- 导航栏 -->
<view class="navigator_box">
    <view class="nav_item">
        <image class="nav_img" src="../../resource/tj.png"></image>
        推荐
    </view>
    <view class="nav_item">
        <image class="nav_img" src="../../resource/sz.png"></image>
        实战
    </view>
    <view class="nav_item">
        <image class="nav_img" src="../../resource/lj.png"></image>
        路径
    </view>
    <view class="nav_item">
        <image class="nav_img" src="../../resource/hd.png"></image>
        活动
    </view>
    <view class="nav_line"></view>
</view>
<!-- 轮播图 -->
<swiper class="swiper_box" circular="{{true}}" previous-margin="18rpx" next-margin="18rpx">
    <block wx:for="{{swiperList}}" wx:key="item">
        <swiper-item class="swiper_item">
            <image class="swiper_img" src="{{item.imgUrl}}"></image>
        </swiper-item>
    </block>
</swiper>
<!-- 实战推荐 -->
<view class="recommend_box">
    <view class="recommend_title">实战推荐</view>
    <block wx:for="{{newCoursesList ? newCoursesList:coursesList}}" wx:key="id">
        <view class="recomend_item">
            <view class="recommend_imgbox">
                <image src="{{item.imgUrl}}" class="recommend_img" />
            </view>
            <view class="item_right">
                <view class="item_title">{{item.title}}</view>
                <view class="item_right_bottom">
                    <text class="item_price">￥{{item.price}}</text>
                    <text class="item_discount" wx:if="{{item.promotion}}">APP购买立减 ￥3</text>
                    <text class="item_level">{{item.level}}</text>
                    <icon class="iconfont icon-zongrenshu" size="24rpx"></icon>
                    <text class="item_amount">{{item.sales}}</text>
                </view>
            </view>
        </view>
    </block>
</view>

问题2：在实际工作中，小程序里的小图标一般是怎么处理的呢？是在字体图标还是用本地雪碧图还是啥？

h022-03-31

共3条回复

好帮手慕星星

2022-03-29

同学你好，因为课程中提供了图片，所以就直接使用了。如果想用icon小图标，在小程序中需要使用class形式。例如icon下载解压后，命名为font放在项目中，可以直接在根目录下

将font/iconfont.css文件中的全部代码复制粘贴到app.wxss作为全局的样式，然后更改font字体目录，例如

在wxml文件中使用icon，例如

除了iconfont，另外一个class值是“Font class”这里的，可以直接粘贴使用

自己测试下，祝学习愉快！

0

heixin_慕码人7523200

hp>现在暂时没报错了，图标在开发工具上能正常显示，然后我用手机预览，就看不见这个小图标，用pc预览，也显示不出来：

这是为什么呢？是小程序不支持阿里的iconfont吗？？？

h022-03-29

共5条回复