如何使用iconfont的CDN
如何使用iconfont的CDN
iconfont作为阿里的图标库,在开发过成功用的已经是非常广泛了,但iconfont并不需要将图标下载后使用,而是可以直接用cdn引入使用,至于使用流程,请看下文。
http://www.iconfont.cn/ 搜索想要的图标,点击加入购物车。

在加入购物车之前,如果没有在iconfont简历图标库的小伙伴还需要先建立一个图标库。

点击图标管理,里面有项目,创建一个即可。
- 在购物车中选择添加至项目

选择一个项目之后

点击下方新icon来袭,点击更新代码
在index.html中加入更新代码后的连接

我用的是class所以使用link便签引入,如果用symbol就可以使用script标签。
原文链接:https://blog.csdn.net/qq_42964517/article/details/83108561
如何使用iconfont的CDN的更多相关文章
- vue工程中使用iconfont在线CDN不生效的问题
为什么在vue工程中引入iconfont有时候不生效呢? 请依次使用以下方法 1. 在index.html中引入在线资源 <!DOCTYPE html> <html lang=&qu ...
- IconFont和FontAwesome的区别?
一.[Iconfont] Iconfont支持所有低版本浏览器: Iconfont的图标库更大: Iconfont可以用自己上传的svg,但是要花费大量时间和耐心去设计AI图标: Iconfont的使 ...
- 来自阿里妈妈的iconfont(转)
转自http://www.augsky.com/775.html 随便说说两者的优缺点 其实主要是说iconfont的优点和Font Awesome的缺点.-_-|||iconfont的图标库相当巨大 ...
- iconfont的蜕化操作
很多国外的网站,访问的时候可以看到,页面先是大面积白一下,然后恢复正常.原因是网页上用到了 webfont,这些页面很多情况都是直接引用 google 的 webfont 地址,中华大局域网下,由于网 ...
- mpvue小程序开发之 iconfont图标引入
背景: mpvue进行小程序项目开发时候,会有很多图标需求,但是小程序官方提供的icon图标库实在有限而且也不利于调样式,所有想到和之前前端项目一样引入iconfont. 图标加入购物车及项目 下载到 ...
- python 全栈开发,Day49(超链接导航栏案例,background,定位,z-index,iconfont使用)
昨日内容回顾 浮动:是css中布局最多的一个属性 有浮动,一定要清除浮动 浮动不是一个元素单独浮动,要浮动一起浮动 清除浮动四种方式: 1.给父盒子添加高度,一般导航栏 2.给浮动元素后面加一个空的块 ...
- layui使用iconfont
layui的图标取自于阿里巴巴的矢量图标库 Iconfont,同样的,这篇教程也是基于Iconfont进行扩展. 第一步,通过浏览器打开 http://iconfont.cn/ ,访问阿里巴巴矢量图标 ...
- 固定定位 z-index iconfont的使用 043
固定定位 现象 脱标 提升层级 将盒子固定住 参考点 浏览器的左上角 : <!DOCTYPE html> <html lang="en"> <he ...
- MintUI引入vue项目以及引入iconfont图标
官网地址:http://mint-ui.github.io/#!/zh-cn 中文文档:http://mint-ui.github.io/docs/#/zh-cn2 示例展示:http://eleme ...
随机推荐
- 【LeetCode】959. Regions Cut By Slashes 由斜杠划分区域(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题思路 代码 日期 题目地址:https://leetcod ...
- 【LeetCode】58. Length of Last Word 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 库函数 双指针 单指针 日期 题目地址:https: ...
- 【LeetCode】69. Sqrt(x) 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 方法一:库函数 方法二:牛顿法 方法三:二分查找 日 ...
- 【LeetCode】640. Solve the Equation 解题报告(Python)
[LeetCode]640. Solve the Equation 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: fuxuemingzhu 个人博客: ht ...
- html2canvas 返回的toDataURL()数据为 data:,的解决方法
1.使用的场景是把html转换成PDF保存下来,代码: /* eslint-disable */ import html2canvas from 'html2canvas'; import JsPDF ...
- Linux进程管理之基本指令
目录 基本介绍 显示系统执行的进程 指令 ps - aux 常用选项 每行栏目的含义 查看父进程 终止进程 相关指令 实用案例 踢掉某个非法登录用户 终止远程登录服务sshd,在适当的时候再次重启ss ...
- 物联网大赛 - Android学习笔记(二)Andriod 应用界面编程
学习目标: Android的程序界面和View组件 View组件和ViewGroup组件 常见的布局管理器 文本框组件TextView和EditView 按钮组件Button 和ImageButton ...
- 编写Java程序,使用抽象类和抽象方法构建不同动物的扑食行为,抽象类设计
返回本章节 返回作业目录 需求说明: 不同的动物都有进食的行为,但是在进食前需要捕获到食物后才可以进食. 要求定义一个抽象的动物类,该类中有一个抽象的捕食方法,和一个非抽象的进食方法.在进食方法中调用 ...
- linux(CentOS7) 之 克隆虚拟机并配置网络(固定ip)
克隆机器 原机关机状态下,克隆. 下一步 选择当前状态,下一步 选择创建完整克隆,下一步 设置虚拟机名称(完成后可以修改).克隆机安装位置,下一步 等待克隆完成 克隆完成 配置网络 添加网卡(因为物理 ...
- 35个JAVA性能优化总结
原文链接:http://mp.weixin.qq.com/s/J614jGM_oMrzdeS_ivmhvA 代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对 ...