用 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 你必须为元素指定一些宽度和高度

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

Replace Icons with Images in HTML/CSS

html

css

imageicon