精灵图+字体图标+CSS三角

精灵图

减少客户端向服务器请求小图片的次数，将小图标集成到一张大图上面，称为精灵图（sprite）

• 主要用到的background-position，来移动背景图片位置，而不是定好的盒子位置,

• 搜索盒子默认在左上角，而精灵图向左或者向上移动对应的值是负值

• background-position顺序是先右移 （水平） 后下移（垂直）

字体图标

展示的是图表，但实际上是字体，适合结构比较简单的图标，功能比精灵图多，但结构复杂的图标还是得精灵图来做

常用的下载链接 icomoon字库(直接下载) 阿里字库（加入购物车+下载代码）

字体图标使用步骤（以icommoon下载为例）

1. 参考上面两个网址，下载对应的图标并将解压后的font文件放在html文件的同一目录内

2. 在CSS样式style里面做字体的全局声明，注意字体文件的路径(url里面的内容)，在style.css第一行有

   <style>
           @font-face {
           font-family: 'icomoon';
           src:  url('fonts/icomoon.eot?cxjrtl');
           src:  url('fonts/icomoon.eot?cxjrtl#iefix') format('embedded-opentype'),
             url('fonts/icomoon.ttf?cxjrtl') format('truetype'),
             url('fonts/icomoon.woff?cxjrtl') format('woff'),
             url('fonts/icomoon.svg?cxjrtl#icomoon') format('svg');
           font-weight: normal;
           font-style: normal;
           font-display: block;
         }
   </style>
   ​
   ​

    

3. 在demo.html里面找到图标对应的复制，并且字体样式要指定： font-family: 'icomoon'，也可以改变字体的大小颜色等（虽然看着一样但实际上是不同的）。

字体图标追加（以icommoon下载为例）

1. 打开icommon，进入"icoMoon App"， 点击上面的图片的 "Import Icons"；

2. 选中之前下载文件里面的“selection.json"文件就可以将你之前保存的图标导入网站；

3. 然后追加新的图标并且重新下载解压即可，之后和上面使用步骤一样。

CSS三角

CSS边框实际构成图如左下图，而所以当把盒子中间的width和height都设置为0，时，所有的边框就变成了三角，如右下图，所以只需要隐藏其余三个三角，就可以得到四个方向的三角：

 

• 需要注意当边框的厚度是a px时，实际整个边框围成的矩形边长为2a px， 并且常用的三角效果需要用到 “ 子绝父相 ”。