关于页面显示方框叉

在进行一个功能的开发时候，从别的的项目中引入一个界面，但在页面打开后发现原有的多选按钮变成了一个方框叉。

知道这个按钮是通过改变按钮中的图片来实现选择按钮

于是去排查了图片目录下的图片，发现这两张图片是存在的，那可能是样式的路径错误或失效了，查看了css的样式代码，发现根本就没有图片的引用路径，这个样式是通过其他方式实现的，下面是<input type="checkbox">的样式代码

.mui-checkbox input[type=checkbox]:before {
	content: '\e411'
}

.mui-checkbox input[type=checkbox]:checked:before {
	content: '\e442'
}

其中content是向标签内添加一个内容，可以是文字、图片和超链接等，经常配合':before'伪类使用。

但是‘\e411’和'\e442'是什么？

是图标的引用，哪图标是图片吗？很显然这两者是有区别的，图标使用的是字体样式，如果使用图片来代替，就需要对图片大小进行调整，往往是图片非常大，需要专门的调整，但使用这种图标的引入就减少了这样的问题。

那怎么引入呢？

向页面中引入图标往往需要两个文件，一个是iconfont.css和iconfont.ttf文件，页面与这两个文件的关系是页面引入css文件，css文件再引入ttf文件，要注意的是项目中可能会导入自己的图标文件，所以名字不一定就叫iconfont.css和iconfont.ttf，至于它们所在的文件夹，那得看你自己的项目了。

最后发现原来的项目中少了一个ttf文件，找到这个ttf文件，将文件放入对应的文件夹中，问题解决了。

最后如果是图片丢失或路径不对，在这个页面上的显示并不是方框叉，而是下面的显示