阿里云图标使用 (symbol 引用方式)
阿里云图标网址: https://www.iconfont.cn/
一、登录注册
这个简单，就不说了
二、给当前项目找图库
2.1、添加项目
2.2、寻找图标添加入库
添加入库
2.3、打开入库 的图标添加到指定项目
添加到当前项目
1
2
三、项目使用图标 ( symbol 引用方式)
3.1、下载 symbol 引用到当前项目
下载后面的文件放到静态资源目录，如下
3.2、添加通用 css
添加图标 css （控制图标默认大小）
/* 阿里云图标Symbol 引用 css */.icon {width: 2.0em;height: 2.0em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
3.2、引用图标 js
这里只需要引用js就可以了，不需要引用 css 文件
<script src="/static/plugins/iconfont/iconfont.js"></script>
3.3、使用图标
#icon-xxxx 选择图标
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-shouye"></use></svg>
四、部分图标无法变色
在使用图标时，可以使用 color: #ffffff; 进行变色，但部分有颜色的图标无法变色
处理方法：
使用批量去色，先去色在下载 symbol 引用文件 （ 3.1 步骤）
阿里云图标使用 (symbol 引用方式)相关推荐
- html 页面如何引用阿里云图标？
1.进入阿里云图标库(iconfont-阿里巴巴矢量图标库) 2.搜索自己想要的阿里云图标(如:telphone) 3.找到自己想要的图标,加入购物车 4.可以加入项目或直接下载代码 5.下载好后,找 ...
- html、小程序引用阿里云图标方法
html引用 样式 //阿里云图标项目里生成的链接 @font-face {font-family: 'iconfont'; /* project id 1603983 */src: url('//a ...
- 小程序symbol引入阿里云图标
需求:链接引入有颜色的图标 方法:阿里云symbol引入图标 资料:阿里云图标 步骤: (阿里云图标加入和复制symbol链接忽略不写了) 初始化生成配置文件package.json npm init ...
- 图标选择器之批量复制阿里云图标名称和图标代码
在项目中需要做一个图标选择器,使用的是阿里云图标,所以需要复制阿里云项目里的全部图标名称和图标代码-一个项目中有几十甚至上百个图标,一个个复制会很费劲 O__O "- F12打开控制台粘贴以 ...
- 如何将阿里云图标导入到微信小程序
如何将阿里云图标导入到微信小程序 阿里巴巴矢量图标库网址 1.先注册一个账号: 2.点击"Icons&Projects",通过关键词搜索想要的图标: 3.选中看中的图标,加 ...
- 在qt中使用阿里云图标
阿里云图标下载 选择下载svg ( 当然你可以选择下载png , 然后按照 qt正常设置图片的方法 , 经过测试 , 还是应该选择这种方法) 在这里插入图片描述 详解使用icomoon生成字体图标的方 ...
- 在 Quasar cli 搭建的 vue 项目中 引用 阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中 引用 阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式 首先说明一下,这 ...
- 在vue框架下element-ui两种引用阿里云图标库的方法
方法一下载资源到本地 1.搜索想要的图标并添加入库 2.添加入项目 3. 下载解压放入src的文件中, 要在main.js文件中声明引入压缩包中的iconfont.css文件 注意文件路径 4.引入 ...
- 在阿里云上以Daemon进程方式运行SAP Cloud Connector portable版本的尝试
url: https://help.sap.com/viewer/cca91383641e40ffbe03bdc78f00f681/Cloud/en-US/f069840fa34c4196a5858b ...
最新文章
- 华为S5348交换机基本配置
- Python程序设计题解【蓝桥杯官网题库】 DAY13-算法训练
- linux怎么编译并安装busybox,linux下安装busybox
- 解决了无法显示验证码的问题
- DL之MobileNetV2：MobileNetV2算法的架构详解(包括ReLu的意义)
- 【POI】对于POI无法处理超大xls等文件，官方解决方法【已解决】【多线程提升速率待定】...
- bat贪吃蛇游戏代码_100行python代码，轻松完成贪吃蛇小游戏
- dlp防泄密系统卸载_怎样做好数据防泄密？奥赛系统早知道
- 漏洞：Client ReDos From Regex Injection
- 【算法系列之八】删除链表的倒数第N个节点
- iPhone 12性能首曝：6GB内存、A14“挤牙膏”
- shell 特殊符号
- ubuntu安装ssh无法连接解决日志（已解决，可连接）-转
- Android N代码暗示隐藏的“多窗口”模式
- 谷歌首页被别的网站篡改
- 通过JavaScript脚本轻松实现视频通话
- 国际版链克口袋 获取方法
- 部署基于SAWP的低成本开源CRM系统
- spoon mysql_spoon(kettle)基本配置（连接Mysql和Oracle）
- Nginx 域名跳转配置