挑选图标

1.进入阿里矢量图标库iconfont图标库地址

2.寻找自己需要的图标加入购物车

3.进入购物车，下载代码

引用图标

我们先来看看下载的需要加入的css代码

这里是我挑选的三个图标的css代码
@在font-face中代码引入了多个src，我们一般用第一个就行了，因为用IE9才能使弄潮儿呀！，后面的都不用，也就不用引入它对应的format了
所以，下载完，我们就加入iconfont.css就可以了！

@font-face {font-family: "iconfont";src: url('iconfont.eot?t=1616639737360'); /* IE9 */src: url('iconfont.eot?t=1616639737360#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARUAAsAAAAACIQAAAQGAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDFAqETIQLATYCJAMQCwoABCAFhG0HQRtuB8gOJaHAwABgYMlmPHy/3//WPmdf+aZJkkl686t3USCRSGIpQCV0ptOIrxSmWwn3/383vcEOTeqSmvkkhYll9AU8nBAmSueqyET1qxeH06b4fMtymWN51AXUxQEFNPYCmUAFgl212008MOPXtJjApA1JsKuaJgqkEmkViLdqJQ3SlkLOpIdeaEcGJsQ3EOvLZME1AF/17+M/ZIQUFE0F0vHmTXU7lP3RvzMKLZ0WfSQCmOfpEAyj4hBI4vWo4RWhDRwSmsxqixwDrRTKWbbOAY1iGbmofSm/4J8XLRDBNGJHwcofPScT/GHJFP4YFSqis3mPDj8BIkG0ph8vVHUUIPYLIH2Hb10RI5MtmeJPUeuWxbdRiw7HyhcuXLLAm5q3wK+3bMFCP4V84VSfNnq+xZvqOX/+xoW+MrZUftLhsJfYKSs1b4qvXeZ3OGa12YoR5t0xFfqPbcRmtTa1D3uZG3a7Az+r2tbmYDeeDOq98kxOlSxoqQNbcwafcgysVgrvqZxKEDYb2WOZNct5ypbAXku3EoTDIe9w1J63tVlW+esExPz5lnk4PmUBJuxY6NeqXEgfjPl08UfOaPv/tP+Cai7ieBSz9qjPv41eRz4jU78Br8d8QhUeIj985+VMKMvCSa+jBN54OXFhGRa567I/Lr3isU3q+w9xAp/fXU3v49Q3rHt4ZXkP5waioYJyp4CK1Aa1ww0fkjr1ndrkaqAPQBRs2R05HdatSzTC2TxNWLDvUfKo4IZVVpyNRm40HSbv4txUSt8efifsOt87I1TzdtczOWwb59waJNGERMZlYPLR4/sJ/GHRoa9BgXgZ1D6szAidUpm3+6rnYAy+Y0rPgEaBSofVVOWXlbkXdcdq/WZqQ3rN97Mc9TzqFEt0EvuJL7tiW9vAR4BhXK8IEwGGoe4USgD1RzgdhuC32Tu3v1vR754QAVAwxu+/tg/jhH1JeoXVzH/OXJmTOZsoM1MOZxSmdP31GhRMmsS/zoRFT84QraxOJfRWaig661D1NpGJPYTGlBG0eqcw6UDt8ClLOEKRTsC+8QBh3k4oZv2Cat51ZGIfQ2PVZ2jNhxAmPYXXhFO2Q41XcojmUTs5cCipVrAGhql53KR3Q0qzjuaabI2TIc6kdpPpKWndcC0yIO6MLqZBygyeZ0iGY/VkDSyHdDqWNHKsBin4FBXPGwtSU5mxO6UoWD3gLnEQGg9pRxpoKJKaAsuAkcV5eO/73SBKZjo0biZrRimDcEzU5ZPSpUhbgawVGFZlfcsxJoMoZeDxGCQGh6VHqgEdoqMBFsk4Xk8DUeClUO3wGRVIdfIxawUp94v0X7gEJpGNMgSYEBNhYui/qFizgjYoJUPUKjNtEA7jcgAAAA==') format('woff2'),url('iconfont.woff?t=1616639737360') format('woff'),url('iconfont.ttf?t=1616639737360') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url('iconfont.svg?t=1616639737360#iconfont') format('svg'); /* iOS 4.1- */
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-shoucang:before {content: "\e86d";
}.icon-xihuan:before {content: "\e86f";
}.icon-zan:before {content: "\e870";
}

下面的.icon-shoucang：before已经把图标都分割好了，我们直接调用这个就好，
就不用取调用图标对应的unicode码了，如果要使用这个码还要去demo_index.html里面查看。
不用这么麻烦，我们直接用.icon-shoucang。

直接调用封装好的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="iconfont.css"><!-- <link rel="stylesheet" href="style.css"> -->
</head>
<body><ul><li><span class="iconfont icon-shoucang"></span></li><li><span class="iconfont icon-xihuan"></span></li><li><span class="iconfont icon-zan"></span></li></ul>
</body>
</html>

调用效果展示

成功调用图标，此处还是要有点掌声哇！！！

阿里巴巴icon图标尽在掌握(前端如何引入icon库,美丽图标随你处置T.T)相关推荐

vue element ui引入阿里库的图标
iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载.在线存储.格式转换等功能.阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具http ...
前端怎么引入Jquery库
1.远程连接JQuery的库站点是在国内,建议使用百度.新浪.又拍云等国内CDN地址, 站点是在国外,建议使用谷歌和微软的CDN地址使用CDN地址引用jQuery的具体方法如下: <head ...
字体图标 fa fa html5,前端引入icon的方法（iconfont,fontawesome）
前端项目中,经常需要从外引入一些icon图标到项目中,我经常使用的两个icon库就是Iconfont阿里巴巴矢量库,以及font-Awsome.接下来我稍微讲一下这两种的使用方法. Iconfont阿 ...
前端开发中icon图标使用的那些门道儿
前端开发图标使用在日常开发,前端coder绕不开一个话题,在页面上添加各种小图标,比如或者是这样的: 一般来说,总体上有三种方案: 位图图标,png图片,经典的使用场景--精灵图: 字体图标,比较 ...
前端引入icon的方法（iconfont,fontawesome）
Iconfont阿里巴巴矢量库的使用使用步骤: 先看一下gif图吧,如果看懂了略过步骤,直接看一下怎么引入 1 进入网站之后,搜索想要的icon图标 2 选择所需要的所有icon添加入库,可以点击上 ...
Vue项目引入icon图标的两种方法
我用的是阿里巴巴矢量图标库 ****一,在文件中引入icon项目链接将图标加入项目后会出一个链接(每新添加图标,此链接都应更新) 在Vue项目中,public/index.html中将项目链接复制 ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...
前端中的icon几种用法
icon 的5种用法 icon有5种常用的用法: img 用法 background 用法 background 一张图(CSS sprite 雪碧图) font 字体 SVG 切图制作 icon ...
前端必备：常用品牌logo图标的官方颜色表示
slogan: 我学编程就是为了赚钱,后来发现它不只是能赚钱- 我们在前端编码过程中,总是会用到一些官方的品牌logo图标.大部分矢量字体图标没有颜色的标注,所以我们在渲染图标的时候总是要去查找这些图 ...
自学前端第二十五:web字体图标使用
web字体图标:本质是字体,伪元素联用的出现一个白色框即字体失效的检查: ①路径那里是不是fonts文件夹的第一子路径就是全部的文件. ②/+unicode编码和转义编码有没有弄棍 (一个给c ...

阿里巴巴icon图标尽在掌握(前端如何引入icon库,美丽图标随你处置T.T)

前端如何引入icon库