为什么icon不用字体图标呢

在小程序中怎么使用之前学那个阿里的iconfont

weixin_慕码人7523200 2022-03-29

源自：慕课小程序实战开发 1-5 使用数据循环展示内容项

收起

3回答

好帮手慕星星 2022-04-01 10:37:45

同学你好，解答如下：

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

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

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

祝学习愉快！

收起回答

好帮手慕星星 2022-03-30 10:51:57

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

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

然后手机预览再试试。

收起回答

提问者 weixin_慕码人7523200 #1

好的，谢谢老师。
提问1：老师，你说的这个“将font/iconfont.css文件中的全部代码复制粘贴到app.wxss作为全局的样式，”可以变为用@import将ont/iconfont.css文件引入app.wxss吗？
提问2：
它说我do not use local path ./
为啥不能用 ./ 呢？？？？那该用什么
在小程序中不能用./吗？

2022-03-30 20:15:22
好帮手慕星星回复提问者 weixin_慕码人7523200 #2

前面回复中老师说了
所以用@import引入css到app.wxss中是不可以的，本地路径./或者直接font/都会有问题。直接用在线链接方便一些，以后更新也方便替换。

2022-03-31 10:44:39

提问者 weixin_慕码人7523200 #3

好的。

问题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：在实际工作中，小程序里的小图标一般是怎么处理的呢？是在字体图标还是用本地雪碧图还是啥？

2022-03-31 23:32:51

好帮手慕星星 2022-03-29 13:40:20

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

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

在wxml文件中使用icon，例如

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

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

收起回答

提问者 weixin_慕码人7523200 #1

好的。
老师，你说的这个“将font/iconfont.css文件中的全部代码复制粘贴到app.wxss作为全局的样式，”可以变为用@import将ont/iconfont.css文件引入app.wxss吗？

2022-03-29 21:28:42
提问者 weixin_慕码人7523200 #2

报错

2022-03-29 21:30:51
提问者 weixin_慕码人7523200 #3

我把代码复制粘贴到了app.wxss，路径没错，然后会报这个错：
小图标是已经出来了，但是报错[渲染层网络层错误]，我换了几个基础库版本都不行：

2022-03-29 21:38:26