当前位置：公众IT > 技术文章 > 引入字体图标，不生效

引入字体图标，不生效

新闻来源：互联网资料整理发布时间：2023/4/5 13:17:22 共计：4604 浏览

前言：

随着百度小程序的风头正劲,越来越多的站长投入到百度小程序的开发中来，但是开发过程中难免会碰到诸多问题无法自己解决，04-26小编发现百度用户：【智能小程序助手】提出了一个关于“引入字体图标，不生效”的问题,在问题中开发者智能小程序助手对该问题做了如下阐述：

问题类型：

问题类型:bug

问题描述：

前置操作（正常执行某类操作）

1. 引入字体图标 app.css

@font-face {
  font-family: 'iconfont';
  src:  url(/static/fonts/iconfont.eot);
  src:  url(/static/fonts/iconfont.eot#iefix) format('embedded-opentype'),
    url(/static/fonts/iconfont.woff2) format('woff2'),
    url(/static/fonts/iconfont.ttf) format('truetype'),
    url(/static/fonts/iconfont.woff) format('woff'),
    url(/static/img/iconfont.38db4ade.svg#iconfont) format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="ion-"], [class*=" ion-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'iconfont' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ion-right:before {
  content: "e932";
}
.ion-right2:before {
  content: "e933";
}

.ion-m-about .path1:before {
  content: "ea02";
  color: rgb(30, 160, 241);
}
.ion-m-about .path2:before {
  content: "ea03";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.ion-m-about .path3:before {
  content: "ea04";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.ion-m-order .path1:before {
  content: "ea05";
  color: rgb(30, 160, 241);
}
.ion-m-order .path2:before {
  content: "ea06";
  margin-left: -0.7724609375em;
  color: rgb(255, 255, 255);
}
.ion-m-order .path3:before {
  content: "ea07";
  margin-left: -0.7724609375em;
  color: rgb(255, 255, 255);
}
.ion-m-order .path4:before {
  content: "ea08";
  margin-left: -0.7724609375em;
  color: rgb(255, 255, 255);
}
.ion-m-order .path5:before {
  content: "ea09";
  margin-left: -0.7724609375em;
  color: rgb(30, 160, 241);
}

2. 图标文件存放位置

该图片引用百度小程序公众平台

3.在具体页面使用字体图标

 <view class="btn-list _ul data-v-dcbcfe34">
        <view class="_li data-v-dcbcfe34">
            <view data-event-opts="{{[['tap',[['navigateHandle',['/pagesA/pages/course-order/course-order']]]]]}}"
                bindtap="__e" class="data-v-dcbcfe34">
                <view class="iconfont ion-m-order _i data-v-dcbcfe34"><label
                        class="path1 _span data-v-dcbcfe34"></label><label
                        class="path2 _span data-v-dcbcfe34"></label><label
                        class="path3 _span data-v-dcbcfe34"></label><label
                        class="path4 _span data-v-dcbcfe34"></label><label class="path5 _span data-v-dcbcfe34"></label>
                </view><label id="message" data-count="0" class="_span data-v-dcbcfe34">机构订单</label>
                <view class="ion-right2 _i data-v-dcbcfe34"></view>
            </view>
        </view>
        <view class="_li data-v-dcbcfe34">
            <view data-event-opts="{{[['tap',[['navigateHandle',['../about/about']]]]]}}" bindtap="__e"
                class="data-v-dcbcfe34">
                <view class="ion-m-about _i data-v-dcbcfe34"><label class="path1 _span data-v-dcbcfe34"></label><label
                        class="path2 _span data-v-dcbcfe34"></label><label class="path3 _span data-v-dcbcfe34"></label>
                </view><label id="message" data-count="0" class="_span data-v-dcbcfe34">关于我们</label>
                <view class="ion-right2 _i data-v-dcbcfe34"></view>
            </view>
        </view>
    </view>

预期结果（应该出现的结果）

该图片引用百度小程序公众平台

实际结果（实际出现的异常结果）

该图片引用百度小程序公众平台

二维码图片/视频复现demo

该图片引用百度小程序公众平台

注：以上是百度小程序开发者：”智能小程序助手”对于本问题的一些阐述，这里做一个引用，我们将实时关注百度小程序助手对该问题提出的解决方案。