资讯专栏INFORMATION COLUMN

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

roland_reed / 1639人阅读

摘要:列表项目首先进入阿里巴巴矢量图标库的官方网址一选择其中一种方式登录。

列表项目

首先进入阿里巴巴矢量图标库的官方网址:
http://www.iconfont.cn/home/i...

一、选择其中一种方式登录。

二、点击导航栏上面的“图标管理”新建项目

新建项目会弹出一个弹出框

三、返回图标库,挑选开发中需要用到的图标,并加入购物车
可以通过搜索框搜索关键字,快速找到对应的图标

1.加入购物车

2.添加至项目

3.生成代码

回到之前创建的项目,生成代码应用

四、将图标应用到vue项目

1.在vue项目中的 index.html 中引入

2.插入图标,用i标签,前面的选择器“icon iconfont”必须要有,后面才是复制选中的图标的代码

如果想更改这个图标的颜色,大小等其他样式,可以直接用改变其样式

.icon-changjingguanli{
    color:red;
    font-size:16px;
}

五、图标会根据项目的开发需求,不断的增加,所以需要更新代码

1.更新代码

2.把更新的代码更新应用在index.html上

3.插入新图标与之前步骤相同

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

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

相关文章

  • Dcloud,hbuilderX开发uni-app第一天踩坑记录

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

    zqhxuyuan 评论0 收藏0
  • vue项目使用阿里矢量

    摘要:阿里矢量库使用方法简易教程写在前面之前项目是自己写的项目来练手,所以用的矢量库。点击生成最新的三如果在项目中引入和使用在点击生成生成一段地址。在里要加入你在建项目时候自定义的前缀,在中增加在下面图标的名字 阿里矢量库使用方法简易教程 写在前面:之前项目是自己写的项目来练手,所以用的矢量库。工作里面如果UI不用的话也只能用其他方法了。我们目前用的SVG,大家的项目里面都用的是那种形式呢?...

    chenjiang3 评论0 收藏0
  • 在线使用iconfont字体图标

    摘要:支持按字体的方式去动态调整图标大小,颜色等等。与使用方式相比,具有如下特点兼容性良好,支持,及所有现代浏览器。相比于语意明确,书写更直观。不过因为本质上还是使用的字体,所以多色图标还是不支持的。 使用阿里巴巴矢量图标库 用前准备 在线使用案例 三种使用方式介绍 vue项目(本地)使用iconfont字体图标 使用准备 进入 阿里巴巴矢量图标库 ,登陆以后,搜索需要的图标...

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

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

    goji 评论0 收藏0
  • iconfont.cn 阿里出品的矢量图标

    摘要:是阿里巴巴推出的矢量图标库,其中涵盖了多个常用图标,并在持续更新中。目前已有图标,部分图标为用户上传,因此默认不公开,但是可以搜索到。下载图标制作模板图标制作规范项目主页编撰 Iconfont.cn是阿里巴巴推出的矢量图标库,其中涵盖了1000多个常用图标,并在持续更新中。(目前已有7000+图标,部分图标为用户上传,因此默认不公开,但是可以搜索到。) showImg(http://...

    wangtdgoodluck 评论0 收藏0

发表评论

0条评论

roland_reed

|高级讲师

TA的文章

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