大家好,我是你的好朋友思创斯。今天说一说阿里矢量图标怎么用_阿里百川,希望您对编程的造诣更进一步.
阿里巴巴矢量图标库地址:
https://www.iconfont.cn/
第一步:输入你想要的图标加入购物车
第二步:点击右上角购物车
第三步:点击添加到项目
第四步:点击更新代码,然后点击下载到本地
第五步:windows r,cmd打开dos窗口,执行命令npm install -g iconfont-tools,会生成一个iconfont-tools
第六步:然后把在阿里巴巴矢量库下载的压缩包解压,取出里面的iconfont.js并放入iconfont-tools文件夹中,
第七步:dos窗口执行命令iconfont-tools,然后一直enter键,执行完后会生成iconfont-weapp文件夹
第八步:取出iconfont-weapp的css,放入uniapp项目中的common文件夹下
第九步:在uniapp项目的app.vue中加入
@import ; (用于黑白色使用)
@import ; (用于彩色使用)
如下图:
<view class="t-icon t-icon-tianqi">view>
第十步:
引用彩色图标:打开common文件夹中的iconfont-weapp-icon.css,在vue文件中按照如下代码引用
<view class="t-icon t-icon-tianqi">view>
引用黑白色图标:打开common文件夹中的iconfont.css,在vue文件中按照如下代码引用
<view class="iconfont icon-tianqi">view>
文章由思创斯整理,转载请注明出处:https://ispacesoft.com/101188.html