文章目录 一、网站icon图标1.使用icon图标2.制作icon图标3.注意 二、图标库的引入1.进入阿里云图标库主页2.选择一种登录方式并登录2.搜索图标并加入购物车添加至项目下载素材 三、压缩图片
提示：以下是本篇文章正文内容，下面案例可供参考
一、网站icon图标 1.使用icon图标例：
首先把favicon.ico （需要设置的图标）放到根目录下。
在html里面， head 之间 引入。代码：
<link rel="shortcut icon" rel="external nofollow" href="favicon.ico" type="image/x-icon"/>
我们可以将自己做的图片，转换为 ico图标，以便放到我们站点里面。
方法：
3.注意
1.它是显示在浏览器中的网页图标。
2. 它是图标形式，不是一个图片。
3. 位置是放到 head 标签中间。
4. 后面的type=“image/x-icon” 属性可以省略。
5. 为了兼容性，应将favicon.ico 这个图标放到根目录下。
网址：https://www.iconfont.cn/
2.选择一种登录方式并登录 2.搜索图标并加入购物车
结果如下：
可以选择多个图标加入购物车，点击右上角的购物车图标，可以看到已选的图标：
主要介绍两种方式，（1）添加至项目（2）下载素材
（1）首先创建或选择一个项目：
（2）点击确定，跳到资源管理界面：
（3）点击生成代码，并复制代码：
（4）将代码粘贴在页面head区域的style标签中或写在外部css中，在head中通过link标签引入，例：
（5）在项目中使用：
点击图标上的复制代码
在项目中直接使用：
此时的图标更像文字，可以设置颜色、大小及是否加粗，注意要给使用icon的标签设置一个属性：font-family: ‘iconfont’，否则图标会不显示。例：
结果：
选择需要的颜色和格式，会生成一个图片icon，在项目中直接当做一个小icon图片使用。
例：
图片线上压缩工具 https://tinypng.com/
168飞艇最强技巧个属性：font-family: ‘iconfont’，否则图标会不显示。例： <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> @font-face { font-family: 'iconfont'; /* project id 2429130 */ src: url('//at.alicdn.com/t/font_2429130_2uokk6yl9qh.eot'); src: url('//at.alicdn.com/t/font_2429130_2uokk6yl9qh.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_2429130_2uokk6yl9qh.woff2') format('woff2'), url('//at.alicdn.com/t/font_2429130_2uokk6yl9qh.woff') format('woff'), url('//at.alicdn.com/t/font_2429130_2uokk6yl9qh.ttf') format('truetype'), url('//at.alicdn.com/t/font_2429130_2uokk6yl9qh.svg#iconfont') format('svg'); } .icon{ font-family: 'iconfont'; font-size: 50px; font-weight: bold; } </style></head><body> <div class="icon"></div></body></html>
结果：
选择需要的颜色和格式，会生成一个图片icon，在项目中直接当做一个小icon图片使用。
例：
图片线上压缩工具 https://tinypng.com/