html - 用 HTML/CSS 中的图像替换图标

Question

我正在尝试在 html/css 上创建一个像这样的漂亮框:

我正在尝试将图标更改为:

原代码如下:

#pricing-table .pricing .pricing-list ul li i {
  margin-right: 12px;
  color: #bdc3c7;
}

并且通过应用此更改它不起作用:

#pricing-table .pricing .pricing-list ul li i {
  margin-right: 12px;
  background-image: url("./Startup Framework Inspired Pricing Table_files/images/background.jpeg");
}

我尝试了这个并且它正在工作，但它是最佳方式吗？

<li>
  <img id="icons" src="./Startup Framework Inspired Pricing Table_files/images/icon.jpg">
  <span> +/- % </span> MTD
</li>

Answer 1

如果你使用background-image，你必须为元素指定一些宽度和高度