用雪碧图插入小图标

标题怎么在段落里插入雪碧图

有时候我们会在段落里用一些小图标或者小图形来为这个段落进行点缀，或者利用小箭头、指示标之类的来进行点击跳转的功能，但是频繁的使用不一样的图片，网络不好的会有延迟，卡顿等现象，极大地影响用户体验效果，如果用一张放满小图标的图片来进行各类图标的插入的话(一般称为雪碧图)，会大大节省加载时间，接下来我会用css样式，来实现这一个效果。
首先我们要有一张雪碧图：

然后我们列举一些需要做出来的效果：
这张图我们取一个图标来做效果：

然后把html的代码进行书写：

重点来了，书写CSS代码：
display: inline-block;
把带入的图标转换成“行内块盒元素”
width: 14px;
height: 14px;
设置将要插入的图标的尺寸（提前用图像处理软件对图标进行度量）。
background-image: url("…/IMG/icon.png");
background-position: -48px -102px;
插入雪碧图，然后输入图标在图片里的位置。
最后样式代码如下：

注意：最好利用一些图片处理软件对雪碧图的某个你要带入的图标进行量尺寸，这样在带入的时候，才会是你想要的图形。
最后得到效果图