微信小程序使用iconfont坑

下载解压

@font-face {
  font-family: "iconfont"; /* Project id 4322044 */
  src: url('iconfont.woff2?t=1699515502419') format('woff2'),
       url('iconfont.woff?t=1699515502419') format('woff'),
       url('iconfont.ttf?t=1699515502419') format('truetype');
}

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

.icon-rili:before {
  content: "\e90c";
}

.icon-jiantoushang:before {
  content: "\e62c";
}

.icon-jiantouyou:before {
  content: "\e62f";
}

方法一、

小程序不能加载woff文件，所以需要我们把他转成base64

工具网站   Online @font-face generator — Transfonter （https://transfonter.org/）

点击下载，解压

@font-face {
    font-family: 'iconfont';
    src: url('data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAAN0AA0AAAAACEgAAAMdAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCUhEICoQEgzALDgABNgIkAxQEIAWFAgdLG/4GyB6FcWNdYqCVj28jbB9HPDzoyf+5SdoHiRvT7QH6IEdpMidO/b+19udwb6JpLWEND4W6OjNrMnePa5hUfx0vxRKl4AlP4hlx/T90Tf4ijLIHeeMHilwUH9CPGqNsGgk0wLNZt42n4wCb4EyHPAXrbE7C9qT3QsCnd3cohG92D33Wbh2oivpAIqQKQoYEWSZOK5AcSd7BKfL++E3vqEiikNIed+b6YQOOf+z6S2lOXs5JP1dCAKAlhBQpmkJgqhyBpnL1BCqqKOHHrj/yv5T+T81tVNOn9f8LEESRICcSJH6eQO4Y5SWgCKqiGh7Bm4AMACFUadG4uzuXxOxb6UzqN9gDKh+9u66x9nT73ZtN6NHbJauz8Pb1jmt3r1q5tzx8q0t2UKkzObz52nPt8MET8pmGAr+vOEoPHr0ff7mjH0CWf1hSdexjlFf6aDI/X7nm0Yviiy9VqSJ/4NhDEcg4dsHWKiqzkQVEGpgHDYsO/NpoCj07dV3QigoD+ow7/x9Vq2j2Or7X2H2bEUsDndeh5tZBz5qyhofLQznj0CoaWDVQfVbh9Kz/1Tq21Rlfmw99T7VcHVnWunFr2chj4q62qWp7g38C/eB2SsWXK80vfKfiG8rroJanXb6Vr5waSUW+klk/KAnp5ecDgeDD8ZfekGsM/btilcxuup5ynklzVJSAYNeCWJqBjE+HLBP8T2QM841A0V4lIEFllVEGUNuFANTRDYFQ0XQIJCrYAIFURSUBMhVdF6CgilcEKKroMwEq6xJDIVBFnTgtFVkltAciGWoaIBPVLSBTNQVIRqyQBfXtkEU1nZOVzXc3rIr2sREGxTAV09iGZpqs2KIL+EgTAy8NtIO3dnKpAC3s4qkwG0aluVQx+Ddcuc3Lh3g+LJawMpuJOAK4quxe5ISuyITePizexmsSGZSEYYhmRCzgaTYyhIu5XAU0C8ufsWE6hgMvJBKTDJUYI9eh2tu32sWg9Z9iALBxfLhQHx6PjAw4+pwBuEkIkM7acdY+bFejMndNESGJJNLIqm62VJ8F6cRUfVqccLJiNHe35VoAAAA=') format('woff2'),
        url('data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAWEAA0AAAAACEgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAFaAAAABoAAAAcmIig5UdERUYAAAVIAAAAHgAAAB4AKQAMT1MvMgAAAZwAAABGAAAAYDxiS9tjbWFwAAAB+AAAAEcAAAFS5knTDGdhc3AAAAVAAAAACAAAAAj//wADZ2x5ZgAAAlAAAAFyAAACBJyISeBoZWFkAAABMAAAAC8AAAA2JgO92WhoZWEAAAFgAAAAHAAAACQH3gOFaG10eAAAAeQAAAATAAAAFAz7AD1sb2NhAAACQAAAAA4AAAAOAToAam1heHAAAAF8AAAAHwAAACABGwCAbmFtZQAAA8QAAAFGAAACgl6CAQJwb3N0AAAFDAAAADQAAABL9Biar3jaY2BkYGAA4oduUy3j+W2+MnCzMIDAwyKbdwj6fwMLA3MDkMvBwAQSBQAy9wqwAHjaY2BkYGBu+N/AEMPCAAJAkpEBFbAAAEcKAm142mNgZGBgYGMoYeBmAAEmIOYCQgaG/2A+AwAVPQGcAHjaY2BhYWCcwMDKwMDUyXSGgYGhH0IzvmYwYuQAijKwMjNgBQFprikMB57pvORhbvjfwMDAfIehESjMiKREgYERAGm9DLsAAHjaY2GAABYItmX4zcAAAATWAUUAeNpjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETAwMz3Se6b/k+f8fwZK8LnlV7CdUFxgwsjHAuYxAPSB9KICRYdgDAK4vDgYAAAAAAAAAAAAAOABqAQIAAHjaZU49TwJBEJ1h977QJbcHd8Rv2Y13iQkUd3DkYlAKKxsLEy0sJJHEQhJj/AP0JFSU/gKtpbaj0B/Br6ARDhdDgTozb94kM3lvAKEBbfKZacMuwIEIMPADXwrdwBwGFazjMUZhET3dyCHpb/N0ZBjUsLQCTYd2hfMMwzP3RJ4kmNjUsYptjo+UIjFpOrBJTp1gZ2MrSQe87Gg6AMLX/JkAOYQNAE0os7iOcTXAinIq4i66hYU1JsyxlCB2OE/7DhVlpbO5F6WDrNe2LLvs4BkXHBOnLKmdjrymOI3SoWaAijWAeZcC6UIA53ABV3ANN3ALd3APD/CknpC1qi/0nf8sdJcXvKgUxjVe9UlBlyXhqzE+Uo95YdzA6C+HnqtFrnSXqCvwJYorM3nt5Tfz70v0ZBhKcql6bt2avpiMmb/WJpvtd39i/IvIfpPl86y52kM5yy7kMhMZTt8WUpmJyf7fMfOj1VTZaiEsarzkbyoRXwoAAHjafZDNSsNAFIXP9E9tQcSC61kVQUh/lqW7Qt25cFHXbTpJW5JMmEwLXbp15QO49TF8AJ9BcOWDeBqvCBWakMs3595zZiYALvEJhZ+njWthhVPcCVdwgli4Sv1RuEZ+Ea6jhTfhBvUP4SZu1Ei4hbZ6ZoKqnXHVKdP2rHCBkXAF53gQrlK3wjXyk3AdV3gVblB/F25iii/hFjpqiTEcDGbwrAtozLFjXSFkboaorB4YOzPzZqHnO70KbRbZjOK/qb/WPeNibJAw2nFp4k0yc0ctR1pTpjkUHNm3NPoI0KNsXLGyme4HvaP2W9qzMuLwngW2POaAqqdR83O0p6SJxBheISFr5GVvTSWkHjDWZMb9/pViGw+8j3TkbKon3NYkidW5s2sTeg4vyz1yDNHlGx2kB+XhU455nw+73UgCgtCm+AYPanCHAAB42mNgYoAALjDJyIAO2MCiTIxMjMyMLDxZmYl5JfmlxRmJeelcUE5lfilLUWZOJgCrcgtPAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMABQABAAQAAAACAAAAAHjaY2BgYGQAgqtL1DlA9MMim3cwGgBAswakAAA=') format('woff'),
        url('iconfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

把这个提花之前的头部。

@font-face {
  font-family: "iconfont";
  src: url("data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAAN0AA0AAAAACEgAAAMdAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCUhEICoQEgzALDgABNgIkAxQEIAWFAgdLG/4GyB6FcWNdYqCVj28jbB9HPDzoyf+5SdoHiRvT7QH6IEdpMidO/b+19udwb6JpLWEND4W6OjNrMnePa5hUfx0vxRKl4AlP4hlx/T90Tf4ijLIHeeMHilwUH9CPGqNsGgk0wLNZt42n4wCb4EyHPAXrbE7C9qT3QsCnd3cohG92D33Wbh2oivpAIqQKQoYEWSZOK5AcSd7BKfL++E3vqEiikNIed+b6YQOOf+z6S2lOXs5JP1dCAKAlhBQpmkJgqhyBpnL1BCqqKOHHrj/yv5T+T81tVNOn9f8LEESRICcSJH6eQO4Y5SWgCKqiGh7Bm4AMACFUadG4uzuXxOxb6UzqN9gDKh+9u66x9nT73ZtN6NHbJauz8Pb1jmt3r1q5tzx8q0t2UKkzObz52nPt8MET8pmGAr+vOEoPHr0ff7mjH0CWf1hSdexjlFf6aDI/X7nm0Yviiy9VqSJ/4NhDEcg4dsHWKiqzkQVEGpgHDYsO/NpoCj07dV3QigoD+ow7/x9Vq2j2Or7X2H2bEUsDndeh5tZBz5qyhofLQznj0CoaWDVQfVbh9Kz/1Tq21Rlfmw99T7VcHVnWunFr2chj4q62qWp7g38C/eB2SsWXK80vfKfiG8rroJanXb6Vr5waSUW+klk/KAnp5ecDgeDD8ZfekGsM/btilcxuup5ynklzVJSAYNeCWJqBjE+HLBP8T2QM841A0V4lIEFllVEGUNuFANTRDYFQ0XQIJCrYAIFURSUBMhVdF6CgilcEKKroMwEq6xJDIVBFnTgtFVkltAciGWoaIBPVLSBTNQVIRqyQBfXtkEU1nZOVzXc3rIr2sREGxTAV09iGZpqs2KIL+EgTAy8NtIO3dnKpAC3s4qkwG0aluVQx+Ddcuc3Lh3g+LJawMpuJOAK4quxe5ISuyITePizexmsSGZSEYYhmRCzgaTYyhIu5XAU0C8ufsWE6hgMvJBKTDJUYI9eh2tu32sWg9Z9iALBxfLhQHx6PjAw4+pwBuEkIkM7acdY+bFejMndNESGJJNLIqm62VJ8F6cRUfVqccLJiNHe35VoAAAA=")
      format("woff2"),
    url("data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAWEAA0AAAAACEgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAFaAAAABoAAAAcmIig5UdERUYAAAVIAAAAHgAAAB4AKQAMT1MvMgAAAZwAAABGAAAAYDxiS9tjbWFwAAAB+AAAAEcAAAFS5knTDGdhc3AAAAVAAAAACAAAAAj//wADZ2x5ZgAAAlAAAAFyAAACBJyISeBoZWFkAAABMAAAAC8AAAA2JgO92WhoZWEAAAFgAAAAHAAAACQH3gOFaG10eAAAAeQAAAATAAAAFAz7AD1sb2NhAAACQAAAAA4AAAAOAToAam1heHAAAAF8AAAAHwAAACABGwCAbmFtZQAAA8QAAAFGAAACgl6CAQJwb3N0AAAFDAAAADQAAABL9Biar3jaY2BkYGAA4oduUy3j+W2+MnCzMIDAwyKbdwj6fwMLA3MDkMvBwAQSBQAy9wqwAHjaY2BkYGBu+N/AEMPCAAJAkpEBFbAAAEcKAm142mNgZGBgYGMoYeBmAAEmIOYCQgaG/2A+AwAVPQGcAHjaY2BhYWCcwMDKwMDUyXSGgYGhH0IzvmYwYuQAijKwMjNgBQFprikMB57pvORhbvjfwMDAfIehESjMiKREgYERAGm9DLsAAHjaY2GAABYItmX4zcAAAATWAUUAeNpjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETAwMz3Se6b/k+f8fwZK8LnlV7CdUFxgwsjHAuYxAPSB9KICRYdgDAK4vDgYAAAAAAAAAAAAAOABqAQIAAHjaZU49TwJBEJ1h977QJbcHd8Rv2Y13iQkUd3DkYlAKKxsLEy0sJJHEQhJj/AP0JFSU/gKtpbaj0B/Br6ARDhdDgTozb94kM3lvAKEBbfKZacMuwIEIMPADXwrdwBwGFazjMUZhET3dyCHpb/N0ZBjUsLQCTYd2hfMMwzP3RJ4kmNjUsYptjo+UIjFpOrBJTp1gZ2MrSQe87Gg6AMLX/JkAOYQNAE0os7iOcTXAinIq4i66hYU1JsyxlCB2OE/7DhVlpbO5F6WDrNe2LLvs4BkXHBOnLKmdjrymOI3SoWaAijWAeZcC6UIA53ABV3ANN3ALd3APD/CknpC1qi/0nf8sdJcXvKgUxjVe9UlBlyXhqzE+Uo95YdzA6C+HnqtFrnSXqCvwJYorM3nt5Tfz70v0ZBhKcql6bt2avpiMmb/WJpvtd39i/IvIfpPl86y52kM5yy7kMhMZTt8WUpmJyf7fMfOj1VTZaiEsarzkbyoRXwoAAHjafZDNSsNAFIXP9E9tQcSC61kVQUh/lqW7Qt25cFHXbTpJW5JMmEwLXbp15QO49TF8AJ9BcOWDeBqvCBWakMs3595zZiYALvEJhZ+njWthhVPcCVdwgli4Sv1RuEZ+Ea6jhTfhBvUP4SZu1Ei4hbZ6ZoKqnXHVKdP2rHCBkXAF53gQrlK3wjXyk3AdV3gVblB/F25iii/hFjpqiTEcDGbwrAtozLFjXSFkboaorB4YOzPzZqHnO70KbRbZjOK/qb/WPeNibJAw2nFp4k0yc0ctR1pTpjkUHNm3NPoI0KNsXLGyme4HvaP2W9qzMuLwngW2POaAqqdR83O0p6SJxBheISFr5GVvTSWkHjDWZMb9/pViGw+8j3TkbKon3NYkidW5s2sTeg4vyz1yDNHlGx2kB+XhU455nw+73UgCgtCm+AYPanCHAAB42mNgYoAALjDJyIAO2MCiTIxMjMyMLDxZmYl5JfmlxRmJeelcUE5lfilLUWZOJgCrcgtPAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMABQABAAQAAAACAAAAAHjaY2BgYGQAgqtL1DlA9MMim3cwGgBAswakAAA=")
      format("woff"),
    url("iconfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

.icon-rili:before {
  content: "\e90c";
}

.icon-jiantoushang:before {
  content: "\e62c";
}

.icon-jiantouyou:before {
  content: "\e62f";
}

完成。

小程序里面不支持全局引入，使用的时候需要我们手动导入

导入的文件名后缀less和wxss都可以。自己定义什么后缀导入什么后准的文件。

使用

<view>
	<text class="iconfont icon-jiantouyou"/>
</view>

方法二、

我们直接修改@font-face为远程服务获取资源

点击复制代码

/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: 'iconfont';  /* Project id 4322044 */
  src: url('//at.alicdn.com/t/c/font_4322044_oagpduq9nnh.woff2?t=1699499078025') format('woff2'),
       url('//at.alicdn.com/t/c/font_4322044_oagpduq9nnh.woff?t=1699499078025') format('woff'),
       url('//at.alicdn.com/t/c/font_4322044_oagpduq9nnh.ttf?t=1699499078025') format('truetype');
}

替换 ，最后结果

/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: "iconfont"; /* Project id 4322044 */
  src: url("//at.alicdn.com/t/c/font_4322044_oagpduq9nnh.woff2?t=1699499078025")
      format("woff2"),
    url("//at.alicdn.com/t/c/font_4322044_oagpduq9nnh.woff?t=1699499078025")
      format("woff"),
    url("//at.alicdn.com/t/c/font_4322044_oagpduq9nnh.ttf?t=1699499078025")
      format("truetype");
}

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

.icon-jiantouyou:before {
  content: "\e62f";
}

不推荐，人家都说了是测试用的。

 推广一下自己开发的微信小程序，有兴趣的朋友可以玩一玩