十步搞定uni-app使用字体图标的方法

发布时间:2022-04-17 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了十步搞定uni-app使用字体图标的方法脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

uni-app简介

uni-app是一个使用Vue.js开发跨平台应用的前端框架开发者编写一套代码,可编译到iOS、AndROId、H5、小程序等多个平台。

  uni-app框架由Dcloud即数字天堂(北京)网络技有限公司推出,该公司主要产品有Web开发IDE Hbuiler、hbuilderx,前端框架mui、uni-app,增强版的手机浏览器引擎H5plus等。

uni-app中使用字体图标图标的下载

首先去阿里图标库选择要用的图标,并且打包下载下来,步骤如下

1.

在这里插入图片描述

2.

在这里插入图片描述

3.

在这里插入图片描述

4.

在这里插入图片描述

5.

在这里插入图片描述

6. 本地文件选取

在这里插入图片描述

7. 粘贴到uni-app项目下的static静态资文件下

在这里插入图片描述

8. 把下载好的图标包里的iconfont.css内的代码粘贴到uni-app项目中的App.vue文件内

在这里插入图片描述

9. 在红色标记框的前面对路径进行修改

蓝色的框选是添加的

在这里插入图片描述

10. 使用

查看下载包内的demo_index.htML文件

在这里插入图片描述

总结

到此这篇关于十步搞定uni-app使用字体图标的方法的文章就介绍到这了,更多相关uni-app 字体图标内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!

脚本宝典总结

以上是脚本宝典为你收集整理的十步搞定uni-app使用字体图标的方法全部内容,希望文章能够帮你解决十步搞定uni-app使用字体图标的方法所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:uni-app