如何使用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的更多相关文章

  1. vue工程中使用iconfont在线CDN不生效的问题

    为什么在vue工程中引入iconfont有时候不生效呢? 请依次使用以下方法 1. 在index.html中引入在线资源 <!DOCTYPE html> <html lang=&qu ...

  2. IconFont和FontAwesome的区别?

    一.[Iconfont] Iconfont支持所有低版本浏览器: Iconfont的图标库更大: Iconfont可以用自己上传的svg,但是要花费大量时间和耐心去设计AI图标: Iconfont的使 ...

  3. 来自阿里妈妈的iconfont(转)

    转自http://www.augsky.com/775.html 随便说说两者的优缺点 其实主要是说iconfont的优点和Font Awesome的缺点.-_-|||iconfont的图标库相当巨大 ...

  4. iconfont的蜕化操作

    很多国外的网站,访问的时候可以看到,页面先是大面积白一下,然后恢复正常.原因是网页上用到了 webfont,这些页面很多情况都是直接引用 google 的 webfont 地址,中华大局域网下,由于网 ...

  5. mpvue小程序开发之 iconfont图标引入

    背景: mpvue进行小程序项目开发时候,会有很多图标需求,但是小程序官方提供的icon图标库实在有限而且也不利于调样式,所有想到和之前前端项目一样引入iconfont. 图标加入购物车及项目 下载到 ...

  6. python 全栈开发,Day49(超链接导航栏案例,background,定位,z-index,iconfont使用)

    昨日内容回顾 浮动:是css中布局最多的一个属性 有浮动,一定要清除浮动 浮动不是一个元素单独浮动,要浮动一起浮动 清除浮动四种方式: 1.给父盒子添加高度,一般导航栏 2.给浮动元素后面加一个空的块 ...

  7. layui使用iconfont

    layui的图标取自于阿里巴巴的矢量图标库 Iconfont,同样的,这篇教程也是基于Iconfont进行扩展. 第一步,通过浏览器打开 http://iconfont.cn/ ,访问阿里巴巴矢量图标 ...

  8. 固定定位 z-index iconfont的使用 043

    固定定位  现象 脱标 提升层级  将盒子固定住 参考点 浏览器的左上角 : <!DOCTYPE html> <html lang="en"> <he ...

  9. MintUI引入vue项目以及引入iconfont图标

    官网地址:http://mint-ui.github.io/#!/zh-cn 中文文档:http://mint-ui.github.io/docs/#/zh-cn2 示例展示:http://eleme ...

随机推荐

  1. 【LeetCode】945. Minimum Increment to Make Array Unique 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 暴力求解,TLE 一次遍历 日期 题目地址:http ...

  2. 【LeetCode】6. ZigZag Conversion Z 字形变换

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 公众号:负雪明烛 本文关键词:字形变换,ZigZag,题解,Leetcode, 力扣,P ...

  3. 1119 机器人走方格 V2

    1119 机器人走方格 V2 基准时间限制:1 秒 空间限制:131072 KB M * N的方格,一个机器人从左上走到右下,只能向右或向下走.有多少种不同的走法?由于方法数量可能很大,只需要输出Mo ...

  4. Anti-prime Sequences

    Anti-prime Sequences Time Limit: 3000MS   Memory Limit: 30000K Total Submissions: 3355   Accepted: 1 ...

  5. 「算法笔记」快速傅里叶变换(FFT)

    一.引入 首先,定义多项式的形式为 \(f(x)=\sum_{i=0}^n a_ix^i\),其中 \(a_i\) 为系数,\(n\) 为次数,这种表示方法称为"系数表示法",一个 ...

  6. Java初学者作业——声明变量对个人信息进行输入和输出

    返回本章节 返回作业目录 需求说明: 声明变量存储个人信息(姓名.年龄.性别.地址以及余额),通过键盘输入个人信息并存储在相应的变量中, 最后将个人信息输出. 实现思路: 声明存储姓名.年龄.性别.地 ...

  7. XML解析和创建的JAXB方式

    1.说明 JAXB是Java Architecture for XML Binding, 即用于XML绑定的Java体系结构, JAXB作为JDK的一部分, 能便捷地将Java对象与XML进行相互转换 ...

  8. Zookeeper基础教程(五):C#实现Zookeeper分布式锁

    分布式锁 互联网初期,我们系统一般都是单点部署,也就是在一台服务器完成系统的部署,后期随着用户量的增加,服务器的压力也越来越大,响应速度越来越慢,甚至出现服务器崩溃的情况. 为解决服务器压力太大,响应 ...

  9. java邮件打包在linux备份数据库练习

    注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6812982512256549387/ 承接上一篇文档<Java实现163邮箱发送邮件到QQ邮箱> 主方 ...

  10. 利用Word2010制作流程图

    利用Word2010制作流程图 原文链接:https://www.toutiao.com/i6483034968225235469/ 一.页面和段落的设置 启动Word2010,打开一个空白文档,并切 ...