当前位置: 首页 > news >正文

uni-app引用外部图标库(阿里矢量图)

uni-app引用外部图标库(阿里矢量图)

作为前端程序员,nui-app是必备的,但是有时候内置的图标,组件又不完全满足,这里就可以引进外部图标,这里引用的是阿里矢量图标

第一步,在项目目录中新建文件夹,如图

第二步,登上阿里矢量图官网,将自己需要的图片先加入购物车,再点击右上角购物车 

 

 

第三部,将下载好的压缩包解压,打开文件,将 iconfont.css 和 iconfont.ttf 两个文件复制到新建的icon文件夹下 

第四步,回到阿里官网,进入购物车,将刚刚加的图标添加项目,没有可新建,这个无所谓 

 第五步,打开 iconfont.css ,将@font-face内容替换掉,并在//前加 https: ,替换好后如下图

 

第六部,页面应用

 

 效果图:

 

http://www.lryc.cn/news/106568.html

相关文章:

  • day49-Todo List(待办事项列表)
  • 寻找丢失数字:数学与位运算的解密之旅
  • 数论分块学习笔记
  • 【基础理论】了解点过程
  • 深入理解Spring MVC中的@ResponseBody注解
  • 大数据学习教程:Linux高级教程(下)
  • 1.Oracle建表及使用
  • 《网络是怎样连接的》(二.2)
  • MySQL加密插件安装
  • 新手入门Jenkins自动化部署入门详细教程
  • Neural Network学习笔记4
  • [转]关于cmake --build .的理解
  • 【Linux下6818开发板(ARM)】硬件空间挂载
  • 剑指offer 动态规划篇
  • 关于Linux中前端负载均衡之VIP(LVS+Keepalived)自动化部署的一些笔记
  • C++ 拷贝交换技术示例
  • 使用 Go 语言实现二叉搜索树
  • 系统接口自动化测试方案
  • 小研究 - JVM 垃圾回收方式性能研究(一)
  • [LeetCode]链表相关题目(c语言实现)
  • [深入理解NAND Flash (操作篇)] NAND 初始化常用命令:复位 (Reset) 和 Read ID 和 Read UID 操作和代码实现
  • RxJava 复刻简版之二,调用流程分析之案例实现
  • SpringMVC中Model和ModelAndView的区别
  • Tomcat安装与管理
  • React之路由
  • 机器学习深度学习——非NVIDIA显卡怎么做深度学习(坑点排查)
  • 2021 Robocom 决赛 第四题
  • 线程池-手写线程池Linux C简单版本(生产者-消费者模型)
  • 05-向量的意义_n维欧式空间
  • 交通运输安全大数据分析解决方案