如何在uni-app使用iconfont

悠悠 2023-07-24 02:14 8阅读 0赞

1.  在阿里巴巴矢量图上收藏自己需要的图标  
    ![在这里插入图片描述][20200408154437195.png]
2.  去到我的收藏,将图标添加入库  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYSF9jc2Ru_size_16_color_FFFFFF_t_70]
3.  在右上角点击购物车图标, 选择添加至项目  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYSF9jc2Ru_size_16_color_FFFFFF_t_70 1]
4.  在我的项目中将代码下载到本地![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYSF9jc2Ru_size_16_color_FFFFFF_t_70 2]
5.  这时会得到一个压缩包,只要将里面的iconfont.css,放入common文件夹; 然后回到阿里巴巴矢量图新建的项目中点击 查看在线链接 在点击生成代码 效果如第四步 将代码复制, 粘贴到iconfont.css,并在//at前面加上http:![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYSF9jc2Ru_size_16_color_FFFFFF_t_70 3]
6.  在要使用的页面中引入  
    ![在这里插入图片描述][20200408160344752.png]  
    ![在这里插入图片描述][20200408160313552.png]

这里是第二种方式

将下载下来的压缩包安照下图操作  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYSF9jc2Ru_size_16_color_FFFFFF_t_70 4]  
在main.js中引入,就可以使用了(在uniapp中真机测试是不支持这样引入的,只能在style中引入)

import './static/iconfont/iconfont.css';

这样的引入方式会出现有的文件找不到的情况,这是只需将第4步中图片的代码,复制替换iconfont.css文件中的部分尽可以了

@import '../../static/iconfont/iconfont.css';

效果图  
![在这里插入图片描述][20200408160450908.png]

[20200408154437195.png]: /images/20230528/f0eeded72f5c4854ab67fb80edc75175.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYSF9jc2Ru_size_16_color_FFFFFF_t_70]: /images/20230528/9bb95b444f1b42beb21ca43e37e78dfc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYSF9jc2Ru_size_16_color_FFFFFF_t_70 1]: /images/20230528/8ea68654e6d3477185b145bb99cf22cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYSF9jc2Ru_size_16_color_FFFFFF_t_70 2]: /images/20230528/eefeb2c826284ada8fc9cf5bcbb5f12a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYSF9jc2Ru_size_16_color_FFFFFF_t_70 3]: /images/20230528/cce2eae516d74b85b8de1cabe4af872d.png
[20200408160344752.png]: /images/20230528/0a8fea240573499486d6a0938b6f8b54.png
[20200408160313552.png]: /images/20230528/cc96f275b24d4da0a14e9f3c348c9069.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYSF9jc2Ru_size_16_color_FFFFFF_t_70 4]: /images/20230528/cce717d0a88f491c880ecbfe6d7cd1db.png
[20200408160450908.png]: /images/20230528/521588f4824a4f88a9158c245cc892fd.png