【微信小程序】引入iconfont字体图标

最新推荐文章于 2024-11-24 12:34:35 发布

原创

最新推荐文章于 2024-11-24 12:34:35 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何在微信小程序中引入和使用Iconfont字体图标。首先，从阿里巴巴矢量图标库选择并添加图标到项目。接着，复制在线连接的类地址，并在小程序的全局样式文件中引入。通过.wxss文件导入图标库，然后在页面中直接使用指定的类名即可显示图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引⼊字体图标

打开 Iconfont-阿里巴巴矢量图标库
选择图标，添加⾄项⽬
Front class - 查看在线连接 - 复制类的地址到浏览器打开
全选复制到项目的 styles/iconfont.wxss
在项目的全局样式文件 app.wxss 中引⼊ @import "./styles/iconfont.wxss";
（使⽤ @import 语句可以导⼊外联样式表，只⽀持相对路径）
在项目的页面中直接可以通过类名使用

styles/iconfont.wxss

@font-face {
   
   font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_1199223_3th2jwrfikp.eot?t=1558237601879'); /* IE9 */
  src: url('//at.alicdn.com/t/font_1199223_3th2jwrfikp.eot?t=1558237601879#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAocAAsAAAAAEcwAAAnPAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEIAqVBJBoATYCJAMoCxYABCAFhG0HgSEbzw4jA8HGAQqwPwvZXxwY4zQ1eELIFi1DMTSnD/pYP4rd6PtLB+Hk8Xpr2ppW/u3LRARP+9Hm7e7/fqLRnHgdjZpIRNF0l1BLEBKJ0mnttAQO5zId9jum2FFJvhqRQvulC7T9pKGRn9NTakJOyA1rw2Rr0NWdetXxBb2KkC9+FZYVRpsPnP8folPv/4O7LFk+bJtCGBShgL4D9B3sNJMrL+1AZvLRWquiUTTqoJv4Xnbvdc4XFQvxEyETSWp7qEZKg1DJjVj4RTdJ0XkFtaDyrVcT6C054t24enhGvoLKAQNecJojP