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

roland_reed 发布于2019-08-23 12:16 / 1868人阅读

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

列表项目

首先进入阿里巴巴矢量图标库的官方网址：
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.插入新图标与之前步骤相同

云服务器 GPU云服务器免费矢量图标网站阿里云服务器搭建vue项目详细介绍 webrtc怎么实际应用在项目中

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

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

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

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

zqhxuyuan 2019-08-23 11:31 评论0 收藏0
在vue项目中使用阿里矢量库

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

chenjiang3 2019-08-26 10:26 评论0 收藏0
阿里巴巴矢量图标库（Iconfont）-利于UI和前端的搭配

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

goji 2019-04-23 11:47 评论0 收藏0