uniapp怎么使用阿里矢量图标，阿里矢量图标下载，阿里矢量图标应用，改变iconfont，uniapp 引用阿里矢量图标

2024-05-09 07:41:32

一.图标下载

1. 话不多说上网址 https://www.iconfont.cn/

2.先选择图标加入购物车，记得先登录

3.去购物车，把图标添加到项目，没有项目的创建一个项目（为啥要创建项目不直接下载？答：方便后期修改图标和添加图标）

4.去资源管理点击我的项目，下载到本地。（联网资源会导致微信小程序及app等出现不显示的问题）

解压后的目录如下，现在我就做好准备工作了

二.把图标引入到项目

1.先来看uniapp项目结构

好多开发人员喜欢把资源放在static目录下，其实这样会导致打包的时候出现重复，增加包的体积

所以我们这里放置在了assets目录下

现在还没完，我们需要改一下css文件的文件引入地址（为啥要改css文件的文件引入地址？答：有些版本会出现不兼容的问题，导致图标显示不出来）

在这里我改了iconfont的名字，改成了jpicon，这样的话我们在写组件的时候就不能用iconfont，必须用jpicon

如图，这样我们就可以把这个组件import引入使用了

图标我们肯定是希望全局引入，方法如下

找到main.js文件，在文件里面添加

import jIcon from "@/components/j-icon/j-icon.vue"
Vue.component('j-icon', jIcon)

其中 import 组件名称 from "组件地址"

Vue.component('使用的名称', 组件名称 )

使用：

<j-icon type="css属性值" size="60" color="#fff"></j-icon>

这样我们的图标就引入完成了

uniapp怎么使用阿里矢量图标，阿里矢量图标下载，阿里矢量图标应用，改变iconfont，uniapp 引用阿里矢量图标相关推荐

layui引用阿里矢量图标
layui-pear-admin添加阿里矢量图标可能需要用到的注册阿里矢量图标账号导入并下载项目使用icon 可能需要用到的阿里矢量图标地址:https://www.iconfont.cn/ ...
引用阿里云矢量图标库
1.登陆http://www.iconfont.cn/ 例如我需要购物车的图标 2.按下回车后会出现一堆的购物车图标 3.喜欢那个一个就鼠标移动到图标上去,加入购物车 4点击加入购物车后,就会出现在 ...
如何引用阿里巴巴矢量图标库的图标
网页链接:https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=14726 ...
vue页面和nvue页面、引用阿里图标库-图标方法
iconfont-阿里巴巴矢量图标库选择所有要使用的图标加入购物车如下图下载下载后下面的3个图标可以任意使用后期如果增加了图标需要重复以下步骤并且把 .ttf 这个文件替换掉项目 ...
vue-cli通过symbol引用阿里iconfont图标
官方文档中已经说明symbol引用方式有以下特点: 支持多色图标了,不再受单色限制. 通过一些技巧,支持像字体那样,通过font-size,color来调整样式兼容性较差,支持 ie9+,及现代浏览 ...
阿里图标库在旧有的iconfont中添加新的图标
1.先去阿里巴巴矢量图标库官网挑选自己需要的图标 iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载.在线存储.格式转换等功能.阿里巴巴 ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
如何将自己设计的图标或通过网上下载的图标上传到阿里图标图库中使用方法教程
如何将自己设计的图标或通过网上下载的图标上传到阿里图标图库中使用方法教程作者:张国军_Suger 开发工具与关键技术:Win10.项目.图标对于编程人员来说,有一个不可获取的图库就是阿里图标库,这 ...
web前端使用iconfont阿里巴巴线上矢量图标
项目需求前端界面交互就需要我们针对用户的不同动作,修改界面样式,其他图片都好说,唯独这icon,如果是直接让ui从设计图切下来的,没法通过css修改大小和颜色.一种情况就只能让ui切两张图,一张是初 ...
微信小程序——引用阿里云字体
阿里图标官网:http://www.iconfont.cn 使用阿里云图标大致的方法就是:选中你的图标--保存至你的项目--下载你的图标项目--在项目中引用字体文件. 具体方法可以参考:引用阿里云矢量 ...

最新文章

热门文章