阿里图标的引入使用即灵活修改大小颜色

网址 iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/

1.进入注册登录一波，有目标直接搜索不要盲找

2.把所有用的添加至购物车点击需要图标上的，点击导航条的购物车图标

3.这次用的全选完点击导航购物车后出现该界面

后有三种使用方式，最好加到项目可以复用绿色框那个，

4.选择添加项目后，跳转到项目，此时想改可以直接点编辑小笔的图标改，不建议后边改代码更灵活

5.点击下载代码，会下载这个项目所有图标的一些代码.zip

6.解压之并找到

7.把这个解压好的内容放到assets目录下

8.在要使用的地方.vue文件引入或全局引入main.js

//引入iconfont.css文件，在刚刚添加的assset/iconfont下，不同文件相对路径不同
import "路径地址/iconfont.css"

9.在hml中使用

回到项目中找到用的单个图标复制他的代码

例如： icon-add

html中使用夹在class的iconfont后

      <i class="iconfont icon-add menuic"></i>//icon-add是刚刚复制的，menuic是自定义的一个class也生效

10.修改样式颜色大小

全部vue项目中都改变找到控制的css文件，目录如红框

单独的某个vue文件生效在其中改<style scopd></style>中添加 .iconfont样式，可以直接从公共文件css复制过来

如果要单独改某个文件中的某一个可以为其单独定义class,样式在该文件的总样式下

   <i class="iconfont icon-add menuic"></i>//icon-add是刚刚复制的，menuic是自定义的一个class也生效单独改这个可以
.menuic{
样式
}

参考

阿里矢量图标在vue项目中线上或本地引入以及颜色大小的调整_sing__star的博客-CSDN博客

阿里图标的引入使用即灵活修改大小颜色相关推荐

前端小知识：ElementPlus引入阿里图标使用（超详细-手把手教学）
文章目录 1. 下载阿里图标 2. 将下载的文件压缩放入到项目中 3. 直接本地打开压缩文件里面的使用Demo - demo_index.html 4. 根据上面的Demo提示,页面需引入文件里面的i ...
flutter显示图标_flutter 引入第三方 Icon 图标（以阿里图标库为例)
在fluttter中引入第三方图标库的具体方法: 1.在阿里图标库选好需要用的图标,添加进购物车将选好的图标打包下载到本地(下载代码),复制iconfont.ttf文件到项目中 2.存放途径:lib/ ...
Uniapp/Vue中引入使用阿里图标
一.uniapp中引入阿里图标将图标加入购物车部分省略 1.下载阿里图标到本地,uniapp不支持symbol格式 2. 打开下载的压缩包,只需要inconfont.css ,将其放到我们的项目 s ...
vue 引入 icon(阿里图标库)
项目中,需要引入一些SVG图标,我一般都是用阿里图标库(https://www.iconfont.cn/),网上有三种步骤,我的也是其中一种,接下来记录一下,我自己用的步骤: 第一步:在阿里图标库找到 ...
小程序以及h5引入阿里图标不显示最简单解决方案
小程序项目,按照老方法,图标部分手机不显示,经理炸毛,自己也头痛,网上搜了一大堆方法,有转化base64的,还有其他各种的,感觉太麻烦了也不好用,本人就讨厌麻烦,直男程序员一枚,今天花时间,认真研究了 ...
uni-app引入阿里图标
个人博客今天刚好用uni-app在开发一个多端应用,在开始引用图标时不知道如何引入多端应用的图标,后来用阿里图标解决了,在此记录下解决的方法去阿里图标官网下载阿里图标,选择unicode 2.复制 ...
阿里图标icon二次引入+ 图标引入后是黑色解决办法。
阿里图标icon二次引入第一到第三步. 第四步找到文件夹复制代码阿里图标icon二次引入 , 引入后你就会发现是黑色没有原来图标的颜色就像这种如何让本来的颜色出来呢 ? 1.找到项目设置 ...
Taro引入阿里图标
首先进阿里图标下载项目至本地下载完解压缩打开后将以下文件复制出来这边我在src下新建一个fonts目录,将上面复制下来的五个文件放到里面(目录名可以自己命名,或者放在其他目录下) 返回到上级也就是 ...
如何将阿里图标库的引入项目中？
阿里图标库官网:https://www.iconfont.cn/ (1)方法一:通过下载png类型的图片,使用image标签来使用图标 (2)方法二:使用字体图标方式 1)选中icon,并添加到购物车 ...

阿里图标的引入使用即灵活修改大小颜色

阿里图标的引入使用即灵活修改大小颜色相关推荐

最新文章

热门文章