项目中引入阿里巴巴图标——iconfont图标的使用-svg格式

一、下载图标

1、先进入iconfont.cn页面

iconfont官网：https://www.iconfont.cn/

2、登陆，并选择你要用的图标进行下载

3、点击下载，并选择弹框下面的色值和大小，点击svg下载，并进行重命名

1-浅灰正常图标

2-明蓝高亮图标

4、把下载的svg图标，放进本地项目里的某个文件夹，进行使用

二、使用图标

1、找到所需界面的html代码

2、在HTML中插入css文件

3、在html里面插入一个 i 标签，i 标签中间插入 图标代码

<template><div><i class="iClassTop" @click="changeLayerOrder('top', item, index)"></i></div>
</template><script>methods:{/*** 修改图层顺序* @param {any} action 下移还是上移* @param {any} layer  图层* @param {any} index  序号* @returns {any}*/changeLayerOrder(action, layer, index) {this.isTop = action// 排序之前重置 layerOrderthis.layerList.forEach((item, i) => {item.layerOrder = i;});if (action === 'top') {   this.layerList.map((item,i) => {if(i == layer.layerOrder){this.layerList.unshift(this.layerList.splice(i , 1)[0]);}})}const layerOrder = {};for (const item of this.layerList) {layerOrder[item.layerName] = item.layerOrder;}changeLayerOrder({taskId: this.$store.state.editTask.activeTask.taskId,layerOrder}).then(() => {this.featureRender();});}        }
</script><style>
.iClassTop {display: inline-block;height: 16px;width: 16px;font-size: 16px;margin-right: 5px;background-image: url('../../../static/images/icon/top-gray.svg')
}.iClassTop:hover {background-image: url('../../../static/images/icon/top-light.svg')
}</style>

显示效果

注：可以自定义大小、颜色

1-默认状态

2-hover高亮状态

项目中引入阿里巴巴图标——iconfont图标的使用-svg格式相关推荐

在项目中使用阿里巴巴矢量字体图标
在项目中使用阿里巴巴矢量字体图标打开阿⾥巴巴字体iconfont 搜索需要的图标,选择要使用的图标,点击添加入库点击右上角的购物车按钮,进入库中选择添加入项目, 选择新建项目,或者使用已有项目 ...
vue项目中如何使用阿里 iconfont图标
先登录阿里 iconfont 图标库:https://www.iconfont.cn/ 1.选择需要的图标添加到购物车中 2.在资源管理里面 --我的项目: 添加新项目这样的话就会永久保存了. 3. ...
项目中引入阿里巴巴矢量库(unicode)
首先选择阿里巴巴矢量库添加到项目,下载到本地. 将下列几个文件添加到项目在main.js中引入 import '../src/assets/scss/iconfont/iconfont.css';
Webpack项目中引入IconFont图标
本篇文章将介绍一下如何在Vue Webpack项目中引入IconFont图标. IconFont官网:https://www.iconfont.cn/ 1.打开IconFont官网并登陆自己的账户. ...
整理在小程序页面样式中引入阿里巴巴字体图标
整理在小程序页面样式中引入阿里巴巴字体库 1.登录阿里巴巴字体图标 2.在小程序项目中配置 1.登录阿里巴巴字体图标点我阿里巴巴字体图标库搜索需要的字体图标将需要的字体图标点击添加到购车中添加 ...
如何在vue项目中系统的使用iconfont字体图标
如何在vue项目中系统的使用iconfont字体图标前言 iconfont的特色官网注册在项目中使用的方式前言今天聊一下前端iconfont的使用方式,前端的图标经过这些年的发展,变得更系统 ...
在vue项目中使用第三方的字体图标库
如何在vue项目中使用第三方的字体图标库以在vue项目中导入阿里字体图标库为例 1.打开阿里字体图标库的官方网址 https://www.iconfont.cn/?spm=a313x.7781069 ...
Vue中引入并使用动态图标
Vue中引入并使用动态图标 1.安装依赖 2.在Vue项main.js中引入 3.经过以上操作,已经实现全局引入,在任何地方直接使用即可. 本次选用Font-awesome-animation 1.安 ...
微信小程序开发-引入阿里巴巴矢量icon图标库
微信小程序开发-引入阿里巴巴矢量icon图标库 https://blog.csdn.net/tang1392/article/details/78927107

项目中引入阿里巴巴图标——iconfont图标的使用-svg格式

项目中引入阿里巴巴图标——iconfont图标的使用-svg格式

一、下载图标

1、先进入iconfont.cn页面

2、登陆，并选择你要用的图标进行下载

3、点击下载，并选择弹框下面的色值和大小，点击svg下载，并进行重命名

4、把下载的svg图标，放进本地项目里的某个文件夹，进行使用

二、使用图标

显示效果

项目中引入阿里巴巴图标——iconfont图标的使用-svg格式相关推荐

最新文章

热门文章