如何使用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. soundcloud to mp3

    关于 本文将介绍一个在线网站,将songs 下载为mp3格式 注意, 大陆需要梯子. 没有?soundcloud无法打开 准备 soundcloud to mp3 一个来自soundcloud的歌曲链 ...

  2. 【LeetCode】947. Most Stones Removed with Same Row or Column 解题报告（Python & C++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 并查集 日期 题目地址:https://leetco ...

  3. 如何让 Spring Security 「少管闲事」

    记两种让 Spring Security「少管闲事」的方法. 遇到问题 一个应用对外提供 Rest 接口,接口的访问认证通过 Spring Security OAuth2 控制,token 形式为 J ...

  4. Java锁与非阻塞算法的性能比较与分析+原子变量类的应用

    15.原子变量与非阻塞同步机制 在java.util.concurrent包中的许多类,比如Semaphore和ConcurrentLinkedQueue,都提供了比使用Synchronized更好的 ...

  5. 【操作系统】Linux bash常用函数路径配置

    临时方法:export PATH=/usr/bin:/usr/sbin:/bin:/sbin长期方法:1.    vi /etc/profile2.    在最后插入并保存:    export PA ...

  6. Pytorch 图片载入

    目录 载入图片和坐标 Transforms Compose transforms 数据集的迭代 import os import torch import pandas as pd from skim ...

  7. [炼丹术]YOLOv5目标检测学习总结

    Yolov5目标检测训练模型学习总结 一.YOLOv5介绍 YOLOv5是一系列在 COCO 数据集上预训练的对象检测架构和模型,代表Ultralytics 对未来视觉 AI 方法的开源研究,结合了在 ...

  8. 使用 DML语句，对 “锦图网” 数据进行操作，聚合函数练习

    查看本章节 查看作业目录 需求说明: 根据客户 ID 统计订单数.订单总金额.最高订单金额.最低订单金额和每份订单平均金额,并按订单总金额升序显示 根据客户统计订单总订购人次数> 5 的统计信息 ...

  9. 学习git&github

    详细学习视频: 链接:https://pan.baidu.com/s/1Vub3YTo7uUUuGCJUCabBRQ 提取码:6q9x 一.git基本工作流程 我们先来理解下Git 工作区.暂存区和版 ...

  10. 桥接模式(python)

    from abc import ABCMeta, abstractmethod class Shape(metaclass=ABCMeta): def __init__(self, color): s ...