平时我们在写网页的时候是否有看到过这样一些小图标，
比如在某些内容板块的起始位置，通常会有一个大标题简洁明的
告诉我们这个部分区域的主要内容，而通常这个时候，我们还能
在大标题的左侧见到一个精美的小图标，起到修饰的作用，有的
时候它不仅仅有美观的效果，通常还能够呼应标题，例如在我们
看到的模块底部通常会有这样一个部分，就是对网页的作者或者
所有者的一些建议或者意见的收集，这个时候通常会有一个🖊的
图标，既让整体看上去不突兀，还呼应了内容，使读者已经明白
了这个部分是干嘛的了。你是不是以为这个只能通过截图来添加
呢？那你就错了，并不是只有截图这一个渠道才能获得喔，我们
还可以通过索引图标库来获取这一个精美的字体呢。下面我就来
介绍一下在HTML和css中通过何种方法能够获得它：
首先我们要有一个能编写HTML的编程软件，DW，Hbuilder X
或者VS code等等都是可以的。好了，编程软件我们已经具有了，
我这次采用的是VS code，然后我们可以写下这样的基础代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
再接下来我们需要用到一个网站：就是这个https://ww
w.iconfont.cn/，这是一个关于自定义字体的网络站点集合，
点开后我们能看到[自定义标题网络站点](http://www.iconfont.
cn/ "自定义标题网络站点")，首先我们需要登录，这里呢有三
种登陆方式可供选择，其一是通过GitHub账号，这是一个全世界
的前端工程师关于前端领域都可以在这里互相交流的网站，相对
的获取难度不是很低，第二个是阿里域账号，这个更是不简单，
需要是阿里巴巴内部员工才会有的账号，只有第三种方式才是比
较大众，相信我们应该都有新浪微博账号吧，第三种方式就是通
过新浪微博账号登录，好了，登录进去后，我们可以见到一个包
含了大量图标的页面，没错这就是我们在网页上看的那种小图标
，怎么样，是不是很多，看花了眼呢。哈，别急，这里的只是给
我们看看，还不能直接拿来用呢，这个时候我们可以通过选取自
己感兴趣的图标，然后把它添加至及自己的小购物车里头呢，放
心，不需要付款，只是加进去放在一起而已，以免等下你忘记了
自己中意的图标。选好之后呢，就可以将这些你选中的图标加至
你新建的一个项目中，以免各个时间段选取的图标到时混乱了。
接下来点击到我的项目页面对这些图标进行小小的修饰一下，当
鼠标划过小图标时你可以看到四个状态，选择那根🖊进入对图
标的的编辑状态，然后你可以把图标的尺寸在十六像素的正方形
中拉至最大，尽可能贴近边缘，但要注意不要被裁切，这样在后
面的使用过程中效果会更好。搞定后这些之后，就可以把这些下
载到本地了，一般我们的下载在本地所得到的都是一个压缩包，
解压之后，哎，都怪我还不够熟练，本来可以把截图给大家看看
的，所以只能用文字叙述了，卑微（狗头保命）求大家放过。好
了，闲话不多说，得到了文件夹后，点开文件夹，我们可以把顺
序第四，七，八，九，十这五个个文件保存并复制。其中第四个
文件夹也就是带有.css后缀可以保存到你的HTML代码下的css文
件夹里头。然后将第七八九十单独保存到另一个新建的文件夹ico
nfont下，这样我们前期的准备工作就完成了。
之后我们呢，要进入到编程软件中，在这里头把iconfon
t.css文件打开，然后在页面里头可以发现一个以@font-face开
头的代码段。这个时候我们在下面的代码段中找到带有url开头的
代码行，放心，就在最前面，不难找。然后在第一行的url括号里
最前面添加你的刚刚建立的iconfont文件夹的路径，一般来说，
都需要先加上一个../，意思就是从css文件夹退出来，再进入你
存放刚刚复制的那些文件而创立的文件夹iconfont内，通常流程
就是这样，得到的路径都大同小异，我还是把这个写下来吧：
../iconfont/，喏，就是这个，把这个添加到最前方紧贴括号的
地方，就完成了第一行的编辑，依样画葫芦，再用同样的方法在
第二行，第四行，第五行以及第六行都写一遍，对第三行不用改。
到了这一步之后呢，就是对我们图标字体的真正引用了。
在用之前还需要一个小小的步骤，要在头部也就是head
部分加一个索引表明我们要引用那里的文档，我这里可以给你一
个示范<link rel="stylesheet" href="css/iconfont.css">。
接着就是重头戏了，我们可以在代码的body正文部分写上一个i标
签，声明我们要引用图标字体了也是给图标字体一个空间和容器，
然后再在标签内声明这是一个类，什么类呢，首先就是iconfont
然后还要加上你在上面那个网站对你喜爱的图标字体的命名，比
如我这里就是给我的图标字体命了个名，叫做icon-xigua，哈哈
哈，你们可能猜到了，没错就是西瓜，就是这么简洁而明了，从
不搞那些花里胡哨的，然后就如这样<i class="iconfont icon
-xigua jj"></i>。最后我们可以再对这些图标字体进行样式上
的修改，例如想让它变大一点，带点颜色等等都是可以的，可以
根据自己的不同喜好来调节。最后将完成后的代码样式给大家参
考一下，大家可以随行发挥，如果我有解释不清的地方或者表述
不佳的部分，欢迎大家向我提问哦。html全部代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/iconfont.css">
<style>
.jj{
font-size: 100px;
}
.jj:hover{
color: gold;
}
</style>
</head>
<body>
<i class="iconfont icon-xigua jj"></i>
</body>
</html>
最后得到的就是一个100像素大的西瓜图标，当鼠标滑过
时还能变成黄金西瓜呢。
来源：oschina
链接：https://my.oschina.net/u/4569798/blog/4328024