![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：
Collection
Collection
以阿里图标（需要注册，免费试用）为例，网址为：https://www.iconfont.cn/。
进入阿里图标网站，登录后点击顶部导航菜单中的“素材库” => “图标库”。
然后在顶部搜索框中输入想要的图标，例如：购物车，选择一个图标，将光标移动到图标上，在弹出的对话框中选择“加入购物车”。
点击顶部菜单栏中的购物车按钮，进入购物车页面。
首次进入需要先添加项目，点击右侧菜单中的“添加项目”，创建一个新项目。
如果以前添加过项目，进入购物车后会提示“添加至项目”，选择已有项目或创建一个新项目。
进入项目后可以看到刚添加的图标，选择上面的图标格式，一般用“font class”。
将光标移动到图标上，在弹出对话框中选择复制代码，可以得到这个图标的类名（class），例如：icon-gouwuchekong。
点击上面的”查看在线链接“，将在线链接复制下来。例如：//at.alicdn.com/t/c/font_3961095_cpx4bys0pgo.css
然后进入编辑器，在文档的<head>中添加<link>语句引入在线图标库：
<head>......<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3961095_cpx4bys0pgo.css"></head>
也可以在外部样式文件中引入在线图标库：
/* icon.css */@import url(//at.alicdn.com/t/c/font_3961095_cpx4bys0pgo.css)
<head>......<link rel="stylesheet" href="icon.css"></head>
在文档的<body>中添加一个<span>元素，为其 class 属性添加两个属性值： ”iconfont” 和 “icon-gouwuchekong“：
<body>......<span class="iconfont icon-gouwuchekong"></span></body>
字体图标本质是一种字体，可以试用字体样式来设置其大小、颜色等样式。
.icon-gouwuchekong{font-size:4rem;color:coral;}
完成后的页面显示效果：