微信小程序如何引入iconfont

拼搏现实的明天。 2023-07-01 10:58 166阅读 0赞

1.  在阿里巴巴矢量库官网上将项目所需要用到的图标建立好，在我的项目中会有一个在线链接，点击复制代码，将在线链接的地址复制下来，放在浏览器的官网上打开，会出现相应的样式代码，将代码全部复制下来，如图所示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70 1]
2.  在`style` 文件夹下建立一个`iconfont`文件夹，在里面建立一个`iconfont.wxss`文件，将之前在浏览器复制的代码全部放在这个文件里面，如图所示：  
    ![在这里插入图片描述][2020012114325710.PNG]
3.  在`app.wxss`文件中去引入这个文件，代码如下：

@import "style/iconfont/iconfont.wxss"

1.  引入完以后，去使用这个样式库，通过`class`类名去引入，第一个为 `iconfont`， 第二个为样式库的类名，例如，在`index.wxml`中使用，代码如下：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200121143451281.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200121143240946.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA==,size_16,color_FFFFFF,t_70
[2020012114325710.PNG]: https://img-blog.csdnimg.cn/2020012114325710.PNG