uni-app项目引入图标

article/2025/8/28 4:52:02

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>

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


http://chatgpt.dhexx.cn/article/Eggr2tIn.shtml

相关文章

免费下载无水印抖音视频

今天&#xff0c;跟大家分享一个免费下载抖音视频的方法&#xff0c;可以去除抖音上的id水印。话不多说&#xff0c;直接上图。 1.复制手机端抖音链接。 点击这个分享图标 复制链接 发送到电脑&#xff0c;打开网页http://douyin.adsond.com/&#xff08;点此直接进入&…

抖音下载android,抖音完整版

《抖音完整版》这是一款可以发布完整版视频资源的软件&#xff0c;在软件中多种精彩丰富的视频内容&#xff0c;拥有各种最新的潮流以及特色的丰富内容&#xff0c;等你来看&#xff01;这里超多种丰富好玩的视频资源&#xff0c;特色的观看体验&#xff01;(以下来为大家介绍详…

CSS3解析抖音 LOGO制作

“抖音”,人气也是非常高,据说拥有7亿用户。 今天我们就来研究研究抖音的logo,蹭蹭热度。 效果预览: 主要用css3新增属性mix-blend-mode,”组成,然后有3种颜色,白色、红色、和天蓝色。 ok,我们先来完成一个“J”。根据以往的经验,我们把它拆分成3部分。 下面我们来…

抖音logo制作教程

1.新建1200*1200PX的画板 2.创建484*484px、216*216px、630*630px、362*362px四个圆形和134*520px的矩形,并按照一下规则进行排放 3.对这几个圆形和矩形进行合并图层操作 合并后效果如下 4.利用路径选择工具进行路径的选择并进行布尔运算 4.1选中中央的两个圆 4.2对中央的两个圆…

CDR绘制抖音APP图标

先看看效果图 感兴趣可加:741090028 第一步:首先建个方形画布,大小自己掌握。 第二步:画一个3cm3cm的正圆,然后原位复制一个选中修改尺寸1.5cm1.5cm,就会得到下图效果 第三步:再画一个2.5cm2.5cm的正圆,然后原位复制一个选中修改尺寸1cm1cm,就会得到下图效果。 为什…

【有利可图网】PS实战系列:制作抖音UI图标

今天给大家更新一个有趣的制作抖音图标的教程。 1、首先新建一个1024X768分辨率为72像素/英寸的温度&#xff0c;为了看得清楚一点&#xff0c;给背景填充一个浅蓝色#8d8dff&#xff0c;然后现在椭圆选框工具&#xff0c;属性栏上将样式改成固定大小&#xff0c;把宽度和高度都…

天呐 这么多人还不知道tiktok也是抖音(字节跳动集团旗下)的?

天呐 这么多人还不知道tiktok也是抖音&#xff08;字节跳动集团旗下&#xff09;的&#xff1f; 短视频忽然间的一阵大风&#xff0c;再恍惚一阵子&#xff0c;你我就都被这一阵风刮成地中海了。最早的短视频源于印象里的QQ音乐相册和微机课上的PPT动画。 但是转眼之间的短视频…

Flutter 自定义控件-仿照安卓和抖音图标绘制

抖音图标&#xff1a; 1、绘制黑色圆角矩形 class MyTrillPainter extends CustomPainter {overridevoid paint(Canvas canvas, Size size) {var paint Paint()..isAntiAlias true..style PaintingStyle.fill //..strokeWidth 1.0..color Colors.black; //背景为纸红色//…

Unity之ASE实现 故障干扰 效果(抖音图标)

前言 今天我们来实现一个类似抖音图标的 故障干扰效果,如下图所示: 原理 我们看到效果图里面有看到红色和蓝色的颜色左右扰动偏移,其实它的实现原理很简单。就是一个图片的R通道和B通道左右偏移,加上一个扰动效果即可,下面我们来打个分析下。 1.扰动效果 扰动我们说…

PS—制作 抖音 图标

博客概要 私下自学过ps&#xff0c;短学期的时候在上UID&#xff0c;巩固了一些ps技巧&#xff0c;至此总结一下~模仿制作 抖音 图标。 文章目录 博客概要总流程图标的详细制作过程 总流程 1.准备Photoshop软件,运行软件并新建合适大小的画布 2.在画布上制作完成 抖音 图标 图标…

PS教程:如何制作抖音UI图标

说到抖音,大家都不陌生,无论是老人还是小孩在闲暇时间都喜欢刷抖音,大家知道抖音图标是怎样制作成的吗?下面将方法告诉大家!   1.首先新建一个1024X768分辨率为72像素/英寸的文档,为了看的清楚一点,给背景填充一个浅蓝色#8d8dff,然后选择椭圆选框工具,属性栏上将样…

摩尔定律还会一直生效吗?

摩尔定律是由英特尔&#xff08;Intel&#xff09;创始人之一戈登摩尔&#xff08;Gordon Moore&#xff09;提出来的。其内容为&#xff1a;当价格不变时&#xff0c;集成电路上可容纳的元器件的数目&#xff0c;约每隔18-24个月便会增加一倍&#xff0c;性能也将提升一倍。换…

芯片——摩尔定律的传奇(下)

芯片——摩尔定律的传奇&#xff08;下&#xff09; 引自: http://www.ccf.org.cn/c/2017-08-16/603629.shtml 50多年来&#xff0c;集成电路(IC)一直按照摩尔定律前行。但是&#xff0c;IC芯片的密度和计算机的速度能够一直按照摩尔定律前行吗&#xff1f;又有哪些物理极限和…

摩尔定律的瓶颈

摩尔定律的瓶颈 上世纪60年代&#xff0c;摩尔发现半导体晶体管制程发展的速度对于一个半导体厂商至关重要。 随着制程的进化&#xff0c;同样的芯片的制造成本会更低&#xff0c;因为单位面积晶体管数量提升导致相同的芯片所需要的面积缩小。所以制程发展速度如果过慢&#…

摩尔定律将失效后的发展方向

1. 摩尔定律 摩尔在1965年4月19日的《电子学》杂志上公布了这一著名预言。英特尔CEO科再奇(Brian Krzanich)表示&#xff1a;“摩尔定律是一项经济定律&#xff0c;与物理和化学并无太大关系。在几年时间里&#xff0c;我们将使芯片上的晶体管数量增加一倍。实际上&#xff0c…

摩尔定律的失效

摩尔定律由英特尔公司&#xff08;Intel&#xff09;的创始人之一的戈登摩尔与1965年提出。 摩尔定律的定义归纳起来有三种说法&#xff1a; 1.集成电路芯片上所集成的电路的数目&#xff0c;每隔18个月就翻一倍。 2.微处理器的性能每隔18个月提高一倍&#xff0c;或价格下…

反摩尔定律

反摩尔定律的兄弟摩尔定律鼎鼎有名&#xff0c; 但同为IT行业三大定律的反摩尔定律也有很大的指导意义。 要了解反摩尔定律首先要了解摩尔定律。 摩尔定律最早是由英特尔公司创始人戈登摩尔(Gordon Moore)博士提出。摩尔定律的主要内容是&#xff1a;每18个月计算机等IT产品的…

摩尔定律还会有效吗

摩尔定律作为计算机发展的三大定律之一&#xff0c;其意义也是深远的。 先简单介绍下摩尔定律&#xff1a;摩尔定律是由英特尔&#xff08;Intel&#xff09;创始人之一戈登摩尔&#xff08;Gordon Moore&#xff09;提出来的。其内容为&#xff1a;当价格不变时&#xff0c;集…

计算机内存发展摩尔定律,摩尔定律还能走多远? CPU 的内存瓶颈

原标题&#xff1a;摩尔定律还能走多远? CPU 的内存瓶颈 在2002年之前&#xff0c;随着芯片密度的增加&#xff0c; CPU的时钟频率也一直不断增加。 对于普通消费者而言&#xff0c;CPU 的频率就代表计算机的快慢。 1981年最早出厂的 IBM PC&#xff0c; CPU 的频率是 4.77 兆…

摩尔定律已经走到尽头?

关注星标公众号&#xff0c;不错过精彩内容 直接来源 | 半导体行业观察 来源&#xff1a;https://mp.weixinbridge.com/mp/wapredirect?urlhttps%3A%2F%2Finterestingengineering.com%2Ftransistors-moores-law 至少过去十年来&#xff0c;人们就一直在谈论摩尔定律的终结以及…