图标

精灵图

精灵图是将多个小图放在一张大图上的技术.然后用background-position调整需要图片的文字

• 测量需要图片的宽高和 XY 轴
• 在页面上放一个跟需要图片宽高一致的盒子
• 调整背景图的background-position: -X -Y;

字体图标

基本用法

• 使用@font-face定义字体 (复制过来，修改路径)
• 复制需要图形的编码符号到对应标签上
• 给该标签设置font-family:iconfont

工作中用法

• 复制下载的字体文件到项目中(文件夹名字为font)
• 在需要的网页中引入 css 文件: iconfont.css
• 看说明书给需要的标签上两个类 iconfont icon-图形类名

伪元素方法，放在 content 里，直接放在 html 里的那是字符实体编码，比如 其中&#是开头用以标明这是字符实体，x表示这是十六进制，而CSS的content接受的也是 16 进制的Unicode编码，所以可以直接写 content: "\e7bb";