CSS进阶班笔记(四)，HTML如何添加锚点

1. 字体图标的下载

2. 字体图标的引入(引入到我们html页面中)

3. 字体图标的追加(以后添加新的小图标)

2.1、字体图标的下载🔥

---

1. icomoon字库

外网，不需要登录即可下载 http://icomoon.io

• 点击 IcoMoon App

• 选择需要的图标

• 点击Generate Font

• 点击 下载

2. 阿里iconfont字库

免费，但是需要登录 http://www.iconfont.cn/

2.2、字体图标的引入🔥

---

我们以 icomoon 字库网为例，将下载包解压，解压之后的文件如图：

1. 把下载包里面的 fonts 文件夹放入页面根目录下

2. 在CSS样式中全局声明字体：简单理解把这些字体通过css引入到我们页面中

右键打开 style.css，这里我演示用notepad++打开，复制如图代码引入我们自己的CSS文件中

3. html标签内添加小图标

我们打开解压文件中的 demo.html ，复制想要的图标，粘贴进我们的 <span></span>标签中

4. 给标签定义字体

/span使用字体图标/

span {

font-family: “icomoon”;

}

注意：标签中的 font-family 的值和我们之前引入字体图标的font-family 必须一样，这里均为 icomoon

5. 完成，所以我们的整体代码为：