![[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
进入阿里图标网站，登录后点击顶部导航菜单中的“素材库” => “图标库”。
然后在顶部搜索框中输入想要的图标，例如：购物车，选择一个图标，将光标移动到图标上，在弹出的对话框中选择“加入购物车”。
点击顶部菜单栏中的购物车按钮，进入购物车页面。
首次进入需要先添加项目，点击右侧菜单中的“添加项目”，创建一个新项目。
如果以前添加过项目，进入购物车后会提示“添加至项目”，选择已有项目或创建一个新项目。
进入项目后可以看到刚添加的图标，选择上面的图标格式，一般用“font class”。
将光标移动到图标上，在弹出对话框中选择复制代码，可以得到这个图标的类名（class）
点击上面的”查看在线链接“，将在线链接复制下来。格式是这样的：//at.alicdn.com/t/c/font_3964449_92cl1ylakf.css
然后再编辑器中外部样式文件中引入在线图标库：
@import url(//at.alicdn.com/t/c/font_3964449_92cl1ylakf.css);
在新建的HTML文件中，添加一个span标签，为其 class 属性添加两个属性值： ”iconfont” 和 “icon-weixin“
<body><span class="iconfont icon-weixin"></span></body>
完成后效果如下图：
效果不是太美观，字体图标本质是一种字体，可以用字体样式来设置其大小、颜色等样式
.icon-weixin{font-size: 130px;color: green;}
13.最终效果：