1、如图，在打代码的软件中，建立一个基础 在一个大的div中包含图标div和文字div，分别添加不同的类名称
2、然后添加图标图片内容，然后在样式中设置图片div的大小，并且图片跟着框大小相同
3、打开预览效果，默认是图标在上面，然后下面是文字
4、可以对图标和文字设置浮动效果
5、设置浮动后就在一个横线上了
6、对文字内容添加修饰，改变颜色，将文字在图形的中间对齐
7、这时候的样式是这样的，中间隔开了一段距离
8、为了更好的提现，可以对整个大div添加修饰，增加边框和宽度
9、然后就可以看到图标被大框所包含了，如图所示
10、在遇到多个的图标文字的时候，因为样式一样的，所以可以对main进行复制即可，然后更改里面的图片位置
11、然后就会有种并排排列的图标了，如图所示，做这种效果的代码有很多种，看自己习惯使用哪种了。
