阿里图标库怎么导入到项目中

阿里图标库

进入阿里图标库的官网 https://www.iconfont.cn/

展示的上图，登录你自己的账号，这里随便写搜索一个图标setting

将鼠标浮在想要的图标上面点击购物车，使其加入购物车

点击自己的购物车

点击 ‘添加至项目’时，会弹出

自己起一个名字，点击确定就行了

然后按照从上到下的红色框顺序，找到自己的图标

鼠标浮到图标上，那个右上角的红色图标，可以进去编辑，根据项目要求，把图标名字改了

点击后弹出

上面可以根据需求调整颜色，下面是你自己更改图标名字的地方

然后点击下载至本地

自己保存在文件夹中，解压后，出现以下几个文件（老版本）

新版本为

将红框的拿出来，放到项目的style文件夹下的fonts文件夹中去

然后在打开iconfonts.css，注意url路径的正确，然后类名是否正确，使用的时候，直接写类名就行了

最后在vue的main.js中引入图标库

注：这里的style路径的缩写，

对于绝对路径名字的更改，你可以在buil的webpack-base-config.js文件中，

更改自己想要路径，然后引入的时候，就可以缩写路径，改完记得npm run dev 配置文件更改，需要重新启动，否则不生效

阿里图标库怎么导入到项目中相关推荐

阿里图标库在旧有的iconfont中添加新的图标
1.先去阿里巴巴矢量图标库官网挑选自己需要的图标 iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载.在线存储.格式转换等功能.阿里巴巴 ...
iconfont字体图标几种使用方式（阿里图标库）以及在vue中使用
先说一下优点: 1/图标矢量化,不用担心失真问题 2/本质上是字体,可以用css控制图标大小/颜色/阴影等 3/图标丰富,也可自定义上传 iconfont网站地址注册这里就不说了,网上有很多资料讲解 ...
如何将阿里图标库的引入项目中？
阿里图标库官网:https://www.iconfont.cn/ (1)方法一:通过下载png类型的图片,使用image标签来使用图标 (2)方法二:使用字体图标方式 1)选中icon,并添加到购物车 ...
Vue - 项目中使用iconfont（阿里图标库）
项目中如何使用iconfont(阿里图标库) 一. 登陆iconfont官网: https://www.iconfont.cn/ 二. 创建一个图标项目 1.点击"图标管理"子目录 ...
scrapy如何指定生成python3的项目_如何把阿里图标库的图标生成代码并应用于自己的项目...
有时候需要用很多图标去完成一定的页面效果和工作展现,框架内置的图标可能满足不了我们的需求,有个很好的图标库想必大家都知道-----就是阿里图标库.那么我们如何才能够把阿狸图标库的图标引用到自己的项目中 ...
如何把阿里图标库的图标生成代码并应用于自己的项目
有时候需要用很多图标去完成一定的页面效果和工作展现,框架内置的图标可能满足不了我们的需求,有个很好的图标库想必大家都知道-----就是阿里图标库.那么我们如何才能够把阿狸图标库的图标引用到自己的项目中 ...
vue中阿里图标库iconfont的设置
步骤基本使用 1 下载存放从阿里图标库中下载压缩包,解压开目录如下在vue项目的assets下创建font文件夹,把这些文件复制到font文件夹下,为了有条理再创建styles文件夹,目录如下 ...
【小程序】小程序中使用阿里图标库
文章目录 1.学会在阿里图标库中图标添加进项目 2.引用图标库资源 1.学会在阿里图标库中图标添加进项目相关文章 2.引用图标库资源 1.复制代码,浏览器搜索 2.搜素后复制代码,新建一个.wxss ...
HTML中如何使用阿里图标库？
为什么使用阿里图标 1.兼容性最好,支持ie6+,及所有现代浏览器. 2.支持按字体的方式去动态调整图标大小,颜色等等. 3.缺点:因为是字体,所以不支持多色.只能使用平台里单色的图标,就算项目里有多 ...
vue 中引入阿里图标库，封装iconPicker组件
一.引入阿里图标库 1.vue项目引入阿里图标库二.封装iconPicker组件 1.子组件 <template><el-popoverplacement="bottom ...

阿里图标库怎么导入到项目中

阿里图标库怎么导入到项目中相关推荐

最新文章

热门文章