uni-app项目引入图标

2024-04-26 04:23:52

uni-app项目引入图标

普通图标引入

1、阿里巴巴矢量图官网创建图标项目

2、将搜索的图标添加进购物车，在购物车里面将图标添加进项目里面

3、下载该文件到本地，将该文件的css文件复制到项目里面（并设置大小）

4、修改iconfont.css文件的引入文件，只留下data路径，并用分号结尾

5、项目页面使用icon

 <view class="icon iconfont 图库的图标名"></view>

彩色图标引入

1、同样创建彩色图标项目，在阿里巴巴矢量图库将彩色图标添加进所需的项目中，将该文件下载到本地

2、通过cmd【window+R，输入cmd】进入下载的iconfont文件内（注：我下载的文件已被我重命名为iconfont）
1）进入下载文件的位置（我的在d盘）d:
2）进入文件图标文件cd 文件地址

3、通过命令行下载iconfont-tools来生成彩色图标库小程序专用文件即可引入使用
1）全局安装：npm install -g iconfont-tools
2）文件生成tools：iconfont-tools
3）按着提示完成输入（每次输入直接回车）

4、完成后iconfont文件夹即生成的目标文件 iconfont-weapp ，将该文件的iconfont-weapp-icon.css 文件放入项目中

5、将iconfont-weapp-icon.css文件的大小重新设置

6、项目中引入该文件

7、项目使用

<view class="t-icon t-icon-图标名"></view><view class="weixinLogin"><view class="t-icon t-icon-weixin"></view><view>微信登录</view>
</view>

提示：若有错的地方希望各位能够指出来，我及时更正。若有不明白的也可以与我沟通。谢谢支持。

uni-app项目引入图标相关推荐

vue项目引入字体图标iconfont
直接将icon下载成图片使用,看此篇一.登入阿里字体图标库选择图标加入购物车下载代码: 解压后,将除了html的文件都复制一份到自己项目assets下: 二.点击打开之前解压的html文件推荐 ...
uni 在app中引入h5页面（uni编写）
关于在app中引入网页,使用的webview标签相对于uniapp 官网给出的webview使用方法在这里https://uniapp.dcloud.io/component/web-view 但是 ...
vant 验证手机号_【uni app】vant weapp的引入和部分详细调用（表单输入框、验证码、弹出层搭配选择器、地图）...
本次小程序的开发使用uni app+vant weapp,vant weapp如何引用和部分组件使用方法如下引入在github(https://github.com/youzan/vant-wea ...
flutter项目引入iconfont【阿里巴巴图标】的图标
下载图标这里直接去iconfont阿里巴巴矢量图标库,选好自己需要的图标,点击如下图所示[添加到库] 然后选择头像左侧的购物车图标然后点击下载代码引入图标解压完打开文件夹可以看到如下文件列表, ...
Vue项目引入icon图标的两种方法
我用的是阿里巴巴矢量图标库 ****一,在文件中引入icon项目链接将图标加入项目后会出一个链接(每新添加图标,此链接都应更新) 在Vue项目中,public/index.html中将项目链接复制 ...
Springboot项目引入Bootstrap后，图标不能正常显示，报：Failed to decode downloaded font
springboot项目引入bootstrap后,报:Failed to decode downloaded font,图标不能正常显示在pom文件中,添加如下配置 <plugin>&l ...
歌单详情内容-图标列表（音乐app项目-第7步）
在上一节歌单详情内容-顶部 (音乐app项目-第6步)_Zhichao_97的博客-CSDN博客的基础上,继续实现详情页的图标列表,效果如下图标注区域所示: 流程: 1.在iconfont官网添加所需 ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...
vue项目引入阿里巴巴矢量图标库图标及其使用教程
添加喜欢的图标方式一:本地方式将图标引入到vue项目在main.js文件中引入阿里巴巴矢量图标库的css文件使用图标,注意加上iconfont前缀效果方式二:使用在线方式引入图标到vue项目 ...

最新文章

热门文章