一、网站icon图标

1.使用icon图标

例：

首先把favicon.ico （需要设置的图标）放到根目录下。
在html里面， head 之间引入。代码：
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

2.制作icon图标

我们可以将自己做的图片，转换为 ico图标，以便放到我们站点里面。
方法：

首先把我们想要的图标切成图片。
要把图片转换为 ico 图标，可以借助于第三方转换网站比特虫： http://www.bitbug.net/。如下：

3.注意

1.它是显示在浏览器中的网页图标。
2. 它是图标形式，不是一个图片。
3. 位置是放到 head 标签中间。
4. 后面的type=“image/x-icon” 属性可以省略。
5. 为了兼容性，应将favicon.ico 这个图标放到根目录下。

二、图标库的引入

1.进入阿里云图标库主页

网址：https://www.iconfont.cn/

在这里插入图片描述

2.选择一种登录方式并登录

在这里插入图片描述

2.搜索图标并加入购物车

在这里插入图片描述
结果如下：

可以选择多个图标加入购物车，点击右上角的购物车图标，可以看到已选的图标：

主要介绍两种方式，（1）添加至项目（2）下载素材

添加至项目

（1）首先创建或选择一个项目：
在这里插入图片描述
（2）点击确定，跳到资源管理界面：

（3）点击生成代码，并复制代码：

（4）将代码粘贴在页面head区域的style标签中或写在外部css中，在head中通过link标签引入，例：

（5）在项目中使用：
点击图标上的复制代码
在这里插入图片描述
在项目中直接使用：

此时的图标更像文字，可以设置颜色、大小及是否加粗，注意要给使用icon的标签设置一个属性：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">&#xe61b;&#xea54;&#xe62a;&#xe600;</div>
</body>
</html>