关于如何使用图标字体的方法做项目会用到哦。

一般我们在查看网页的时候都会发现它用了很多这种小图标，以这个小定位图标为例，给大家详细说明如何引入图标字体到自己的网页吧。

如何下载图标

1. https://icomoon.io/（可以下载字体图标的地址）
   
2. 然后点击iconMoon App
   就可以选择自己想要的图标字体啦
3. 选择好之后，点击Generate Font（查看自己选择的小图标）
   
4. 进来查看自己选择的图标，没有问题的话就可以下载啦
   
   下载完毕，接下来就是如何引用到自己的网页啦
5. 下载完成，解压之后，有个fonts文件夹，将这个文件夹可以放到自己的项目底下。（就是这个样子的）
   
   
6. 接下来就要引入CSS样式啦

@font-face { /*声明字体*/
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?xhon53');
  src:  url('../fonts/icomoon.eot?xhon53#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?xhon53') format('truetype'),
    url('../fonts/icomoon.woff?xhon53') format('woff'),
    url('../fonts/icomoon.svg?xhon53#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

注：此段代码大家可以直接复制粘贴放到自己的CSS文件里
下一步就是如何引用图标到自己的网页中啦

1. 用上面定位的小图标举例说明吧
   在北京前面放一个<i>标签

2. 然后打开自己下载的字体文件夹（demo)这个html文件
   

3. 打开之后就是这个样子的（并选择复制你想要的图标，选择那个小方框复制）
   

4. 复制好之后，放到<i>标签里就可以啦（这样我们是看不见的哦，还需要引用的）
   

5. 最后一步就是在CSS文件里引用了（代码如下）

i{
font-family: "icomoon";/*引用字体*/
	font-style: normal;
	font-size: 14px;
}

最后我们就引用成功啦，可以打开网页看效果，效果图如下哦（其他字体图标也是一样的用法哦）

欢迎指导，大家一起学习。