iconfont图标无法显示

来源:3-4 使用 Loader 打包静态资源(样式篇 - 下)

_jmxiao

2021-07-20

打包之后图标无法显示

图片描述

样式生效了,但是没有显示图标

index.scss

@font-face {
  font-family: "iconfont"; /* Project id 2687902 */
  src: url('./font/iconfont.eot?t=1626775893496'); /* IE9 */
  src: url('./font/iconfont.eot?t=1626775893496#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMEAAsAAAAABsQAAAK4AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACCcAqBQIFLATYCJAMICwYABCAFhGcHMBsHBhGVk3tkX2FThuuBSIHNkPBsrtHFYAEMAhT4AgUAAAAABM/TuP/OnZkPIJH1IX2RXQlAxcZNUANUGdL6aK3t/T9S4mTkLKIWPa/M2vneHNLohEaKeEl4ysAYcOG0uE50+ZWnxk9tAPzPNfkKaCD5AfySFl2URQc2wOnhMCpshHvzAfiG6ZU/cBBfQQBX0rCjMvcKK/Ec5JPDhGJQ3QJZrgy6njaceQCDgWlnBMehKw2yhgOoefUQYzX6vPyQyywoHDSqoFRndXL7670eM57+P80axx/dLtcAz1OAA6CBJMCAVHYniplGmkQaV4chAtYaBL4e/P/3JuTQfx7iiMp2ByAcMs/EWu5RsxUAJum1AzWTikCllb9Xa7HomZo3u7t5LJ5Pn7m6L7x8yUbTr17tetzZRyQzl+piMH36Et5Wv2DnNKhn9/Mj/86tJqvJm9+Pn9tPPKrur3ZkTOZ2OEy8KPN/iLvmX2bTlhVjc1ZEIvtb3+1CnfXX71rsNb+Pwxacc/k5+NnNvR8fhj9KWHOPDQbw/26i9NSP/Q0/h+EtXtbHzQDwKbzsVcRhFzif2SHwG/vDAP//JoonQRk6qhBAYZ8UU4CrpoSaKY8vn6dq/G43Izjjd9MuJ8Iy0DgTgRgiARxwIwMcccYGriSStd4NP0aZRowLEMMcAMGbc1B4cgU03txBDPEGHAjkCzjizV9wpTry2M2NGNHldkBOqEDcgJNNrY2aIqHHaIaSh7roOYbewTBkcVpO72ONYY45/aXJiTTo0FSwR8/DsmygDY1HSbElapeSRDe9JZZNxbYDckIF4gacbGrt+an4fcdohpKHgch5IvQOCocsTgcg+4p6UMuD7NNfmpxIgw4gVcEeH4Zl2UDbPMyjpNhOiLVLiebTQxXx9qrq79GsA6VVkR6kmRaO194xBg==') format('woff2'),
       url('./font/iconfont.woff?t=1626775893496') format('woff'),
       url('./font/iconfont.ttf?t=1626775893496') format('truetype'),
       url('./font/iconfont.svg?t=1626775893496#iconfont') format('svg');
}

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

.icon-bianji:before {
  content: "\e89a";
  font-size: 24px;
}

文件结构

图片描述

请问dell老师这个是什么原因呢

写回答

1回答

Dell

2021-07-21

大概率是你字体文件里不包含这个字符,重新下载一次字体文件

0
4
_jmxiao
回复
Dell
谢谢老师
2021-07-27
共4条回复

从基础到实战 手把手带你掌握新版Webpack4.0

知识点+项目实例+原理讲解 全方位解析Webpack4新版本

3627 学习 · 1291 问题

查看课程