资讯专栏INFORMATION COLUMN

在vue项目中使用阿里矢量库

chenjiang3 / 1108人阅读

摘要:阿里矢量库使用方法简易教程写在前面之前项目是自己写的项目来练手,所以用的矢量库。点击生成最新的三如果在项目中引入和使用在点击生成生成一段地址。在里要加入你在建项目时候自定义的前缀,在中增加在下面图标的名字

阿里矢量库使用方法简易教程

写在前面:之前项目是自己写的项目来练手,所以用的矢量库。工作里面如果UI不用的话也只能用其他方法了。我们目前用的SVG,大家的项目里面都用的是那种形式呢?

一: 在阿里矢量库中注册账号


这个首页的登录页面,一般用github登录就好啦!

二:登录后如何添加自己的项目


登录以后就可以看到这个页面啦!点击下图的图标管理

01 可以申请一个自己的项目 点击紫色的按钮即可看到下面的页面

02 完善相应的信息就可以有自己的项目了。在首页搜索你需要的图标,例如:收藏

03 点击相应的图标,加入到库中,点击购物车的图标可以下载或者添加到自己项目中。如果想加载的快点,就可以直接下载到本地。

04 到购物车里面就可以选择相应的图标到自己的项目中,点击确认就会跳转页面到你的项目。新增的图标就出现了。

05 点击生成最新的icon

三:如果在项目中引入和使用icon

在点击生成font class 生成一段地址 。在index.html中加入

在项目中,你就可以使用i标签来用了。这是我项目中是使用icon的方法啦。在class里要加入你在建项目时候自定义的前缀,eg:iconfont
在class中增加在font class下面图标的名字:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106172.html

相关文章

  • 详细介绍vue项目应用阿里巴巴矢量图标

    摘要:列表项目首先进入阿里巴巴矢量图标库的官方网址一选择其中一种方式登录。 列表项目 首先进入阿里巴巴矢量图标库的官方网址:http://www.iconfont.cn/home/i... 一、选择其中一种方式登录。 二、点击导航栏上面的图标管理新建项目 showImg(https://segmentfault.com/img/bVbhUnn?w=1228&h=242); 新建项目会弹出一个...

    roland_reed 评论0 收藏0
  • Dcloud,hbuilderX开发uni-app第一天踩坑记录

    摘要:其实大部分坑在在官网都有介绍具体位置在在中使用模块官方文档中总结了很多坑,但我只说一下我今天遇到的坑不支持中的过滤器解决办法从后台获取数据后始用对数据进行处理,例子始用过滤器时始用仅为示例,并非真实接口地址。 其实大部分坑在 uni-app在官网都有介绍 具体位置在 在 uni-app 中使用 Vue.js 模块 官方文档中总结了很多坑,但我只说一下我今天遇到的: 坑1:uni-app...

    zqhxuyuan 评论0 收藏0
  • 阿里巴巴矢量图标(Iconfont)-利于UI和前端的搭配

    摘要:首先我们需要找到这个网站打开之后看到的首页大概是这个样子里面有搜索框,首先先是来找图标设计,里面图标大都是免费的,而且样式多种多样,打个比方我们搜索一个首页的图标。    前端时间,做一个小网站的时候,需要用到很多小图标,UI设计好之后不知道如何使用,如果使用图片那会很麻烦,相信一些前端更喜欢iconfont这样的标签直接调用,这样包括颜色和大小以及使用都更方便快捷,于是我们经过交流之后决定...

    goji 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<