搞导航站的时候，站是静态的，没后台，也不会自动抓图标，在那搁阿里图标库一个个换呢，但是彩色的还有数量限制，我就像搞图片，并且彩色的svg渲染性能不如png。（阿里说的）
🤔 搜索是个好东西
1.学到了。。首先白嫖到了这段代码
html
.icon-name {
background: url("../../img/username.png");
width: 40px;
height: 35px;
}
我知道.icon-name是图标名字了，背景是一个图片链接，这就是我的目的。接下来是宽 高
但是没显示QAQ
2.因为 i 标签是行内标签，它不可以设置宽高。**所以上面设置宽高不起作用
然后让 i 标签可以设置宽高：display: inline-block;
出现了 i 的 背景图片
3.但是现在出现了一个问题，我的宽度过大，图片重复出现填满区域，要解决这个问题，则设置 no-repet
🤗总结归纳
所以他的代码如下：
html
.icon-name {
display: inline-block; //可以设置宽高
width: 40px;
height: 35px;
margin: 0px 10px;
background: url("../../img/username.png") no-repeat; //避免图片重复
}
不过我遇到了新问题，就是我的图标贴着名字出现了，我想要有点距离。查了下，加了 margin: 0px 10px; 第一个数字代表上下不动，第二个代表左右的间距。