使用阿里矢量图标库操作流程
使用阿里矢量图标库操作流程
1、地址
http://www.iconfont.cn
2、注册登录
登录常人只有两种方式:github、新浪,本人这里使用的GitHub,为了演示转让项目注册两个账号
登录成功:
3、创建项目
菜单栏选择==图标管理==我的项目
4、选择图标并加入项目
点击进入官方图标库,选择适用于自己项目的图标
将需要的图标添加入库
选择完成,点击右上角购物车图标
选择添加至项目
选中自己项目名称点击确定
这里图标已经选好了,下面进入应用阶段。
5、查看在线引用地址
点击查看在线链接
点击生成
这里提供了三种使用方式,我们这里演示使用的是第二种 Font Class
在线预览样式内容:
6、修改图标样式名称
因实际项目使用时样式名称容易冲突,这里我们先进行修改
为了形成对比现将修改前的部分内容展示:
修改样式名称
编辑页面:
放大图:
这里选择仅保存(如果选择保存为副本,那么原图标将保存至我的图标中)
刷新样式代码:
重新在线预览:
注意:每次修改更新后的样式引用路径被重置,请重新引用重置后的样式地址
7、项目转让和成员添加
创建项目信息应用团队开发时,可以将团队中的人员加入项目中,(团队开发时注意如果有修改及时与他人沟通,不要坑队友!!!),因故不能继续参与项目开发时需要将项目相关信息交接给同事,使用转让来完成。
添加项目成员:选择项目中的==》更多操作==》编辑项目
在协作者中添加成员,这里成员是用户名
点击保存则完成成员添加操作。
项目转让:更多操作==》项目转让
转让成功后更多操作则不能编辑,项目列表页将变成我参与的项目
8、实战应用
项目应用才是所有操作的目的,下面一起来验证吧!
引用注意事项:
1、 引用时必须引用样式class="iconfont icon-xiuggaihoude-close-copy" 如果不引用iconfont则出不来
2、 如果直接打开html页面也是没有样式的,因为是服务器请求访问的这里我使用的是tomcat
使用阿里矢量图标库操作流程相关推荐
- uniapp 引入阿里矢量图标库的详细步骤及踩坑经历
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历 首先在阿里矢量图标库选择自己喜欢的图标 加购物车如下图 点击右上角的购物车 添加到项目 这里有坑 首先你不选中在线链接 你是看不到 @font-f ...
- vue框架项目中使用阿里矢量图标库
vue框架项目中使用阿里矢量图标库 一.打开阿里矢量图标,将需要图标加入购物车,选择下载代码 二.解压缩包,将解压缩后的 文件夹放入项目文件夹下的src/assets 1.在main.js中引入css ...
- 【sciter】:sciter 使用阿里矢量图标库
sciter 使用阿里矢量图标库 步骤一:选择要使用的图标,并添加到项目中(阿里矢量官网中的项目) 步骤二(关键):选中项目设置,在字体格式中选择TTF,其他不选,保存 步骤三:点击 Font cla ...
- 在uni-app里面怎么引入阿里矢量图标库?
最近在学习uni-app,每次在需要用到icon的时候都得下载下来,感觉好麻烦,所以就找到了直接引入阿里矢量图标库的方法,妈妈再也不用担心我为下载icon的样式不规范而发愁了,以下方法供大家参考 在图 ...
- Vue项目中,引入阿里矢量图标库
Vue项目中,引入阿里矢量图标库 (1)阿里矢量图标库地址(需要登录): https://www.iconfont.cn (2)找到自己心仪的图标: (3)添加入库: (4)点击购物车图标(免费的哦) ...
- vue项目中使用阿里矢量图标库
1.下载图标代码在本地 2.将一下文件放在一个文件夹比如icon文件夹下,将icon放在assets文件夹下,如图 3.在main.js中导入 import './assets/icon/iconfo ...
- 微信小程序自定义组件使用阿里矢量图标库图标
有时候我们有这一种需求:在使用组件的时候,希望能传入自己写的class样式. 测试了一番,直接传递class参数是无效的,那我们怎么做呢? 开始实践 仔细查阅了官方文档,发现是可以的. 我们首先在组件 ...
- uniapp添加阿里字体图标库图标
字体图标添加 1.需要到阿里矢量图标库添加 2.添加后Unicode下载并替换@/styles/font下文件 3.在线图标方式 复制阿里矢量图标库->我的项目->Unicode-> ...
- 新版Iconfont-阿里巴巴矢量图标库支持三种引用方式
官网地址:iconfont-阿里巴巴矢量图标库 然后将压缩包解压,代码包括demo的html和css文件.iconfont的css.js以及各种字体文件,demo是使用说明,iconfont文件是使用 ...
- 如何使用阿里巴巴矢量图标库,创建自己的svg图标库(iview ts)
一.在阿里矢量图标库创建自己的项目 点击上传图标至项目 点击下载至本地 就会获得对应的iconfont文件夹 二.将文件夹放在 三.在项目的main.ts中加入 import '@/assets/ic ...
最新文章
- IDEA IntelliJ 如何新建一个不用任何框架的web项目
- mysql-连接查询
- spring cloud(三) config
- 历经5代跨越25年的RTC架构演化史
- 软件开发需要重视对异常的处理
- mongodb数据库的安装 for windows版本 0916
- java中的step_Java中finalize()
- c#基础(一)之内存管理
- 一键清除系统垃圾 bat文件
- newifi路由器 php,新路由newifi固件下载
- 2019年系统架构设计师考试--从备考到拿证
- PAT --- 1055.集体照 (25 分)
- 数字经济是党和国家定下的重要发展战略
- hadoopsnappy解压_配置Hadoop2.7.2和Hbase1.1.5支持Snappy解压压缩库
- Android8.1 吉字节问题
- Arduino IDE+_Attiny13/85实践(四) Mind+ 与Attiny85
- 什么错误是计算机检查不出来的,电脑开机检测不到硬盘,提示3F0,求助大神如何检测硬盘的问题. 求大佬指点...
- 2018.4.1(python) 请编写程序将用户输入华氏度转换为摄氏度,或将输入的摄氏度转换为华氏度。 //(米和英寸之间的长度转换)//热量转换
- 操作系统中文件系统-文件的分类
- 华为p20所有权限都打开了,QQ消息依然不弹窗提醒?