HTML自定义（不是Font-Awesome）图标类不起作用

Question

我试图将自定义图像包含为图标，而不是像通常情况那样来自Font Awesome。所以在我的HTML按钮中，我引用了CSS类，其中包含我想用作图标的本地图像的背景图像URL。但是，它不会在浏览器中显示。请注意，所有代码都经过了完全验证。

HTML：

<div id="search">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
  <button type="submit" class="searchButton">
    <i class="icon"></i>
 </button>

CSS：

.icon {
background: url('../imgs/search-icon.png');
height: 20px;
width: 20px;
}

小提琴：

＆＃13;

＆＃13;

#search {
  width: 100%;
  position: relative;
}

.searchTerm {
  float: left;
  width: 100%;
  border: 3px solid #00B4CC;
  padding: 5px;
  height: 20px;
  border-radius: 5px;
  outline: none;
  color: #9DBFAF;
}

.searchTerm:focus {
  color: #00B4CC;
}

.searchButton {
  position: absolute;
  right: -50px;
  width: 40px;
  height: 36px;
  border: 1px solid #00B4CC;
  background: #00B4CC;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 20px;
}

.icon {
  background: url('https://postimg.org/image/bfac47qav/');
}

＆＃13;

<div id="search">
  <input type="text" class="searchTerm" placeholder="What are you looking for?">
  <button type="submit" class="searchButton">
        <i class="icon"></i>
     </button>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以试试这个

BUTTON {
 padding: 8px 8px 8px 32px;
 font-family: Arial, Verdana;   
background: #f0f0f0 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABfUlEQVQ4y42TP2tUQRTFf3PnPYiLIAiKiKhIsLbxS9hZaykWNmKjgqT0A6SxslRIFRsRv0QwdZB1YyGipImbzWbfnHst3sZdZF92Bw7D/LmH37nDpL1NAyAlHgDXWW18j+A9QBXTnQhu3H704TXS2aU5s/f2/qvTZeXx78goDdE0Z9anusYDmxn4zMAlYglBMsN9zkAzgxwrGGCGnLzIwELCVZbUG+oicDWoLOtBhZwcAQFUZd6gCC/dBPW5Hr+/7VPaCHci2DU5TJVDBe+Q5cyvwT4ucfdleS7noQdURfMEDd4Rwc04OvzDtfWbjCYTitpG/hehoI4IZhmpjTgcj09jUGmeQAVXB4EypbRxjk5O0JTAvgygOBSnap9xsUJC0/nx4BLFW3p78c7Z6SeOJ2ktvL2wUC7G4zHh4uBgxPEkre30Ewb0NrZ0+XDEeUtGXdULZckYDodYMp59vLD9eZftjS31EnARuPr0Xn6yfoVbq/zlrz/pb37SG+DHXyrMGdFXikHpAAAAAElFTkSuQmCC);
    background-position: 8px 8px;
    }

小提琴http://jsfiddle.net/EFsU8/并在using images inside <button> element中解决，您也可以检查

Answer 2

试一下

将display: block添加到班级图标，根据@fbuchlak建议答案，但您还必须检查图像路径。

这不是图像的正确路径

https://postimg.org/image/bfac47qav/

这是正确的路径

https://s7.postimg.org/5ecn753or/search-icon.png

以下是示例

#search{
  width:100%;
  position:relative;
}
.searchTerm {
  float: left;
  width: 100%;
  border: 3px solid #00B4CC;
  padding: 5px;
  height: 20px;
  border-radius: 5px;
  outline: none;
  color: #9DBFAF;
}
.searchTerm:focus{
  color: #00B4CC;
}
.searchButton {
  position: absolute;  
  right: -50px;
  width: 40px;
  height: 36px;
  border: 1px solid #00B4CC;
  background: #00B4CC;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 20px;
}
.icon{
   background: url('https://s7.postimg.org/5ecn753or/search-icon.png');
   width:20px;
    height: 20px;
    background-position: center;
    background-size:cover; 
    display:block;
}

<div id="search">
  <input type="text" class="searchTerm" placeholder="What are you looking for?">
      <button type="submit" class="searchButton">
        <i class="icon"></i>
     </button>
  </div>

Answer 3

简单方法是使用content。请勿使用background

#search {
  width: 100%;
  position: relative;
}

.searchTerm {
  float: left;
  width: 100%;
  border: 3px solid #00B4CC;
  padding: 5px;
  height: 20px;
  border-radius: 5px;
  outline: none;
  color: #9DBFAF;
}

.searchTerm:focus {
  color: #00B4CC;
}

.searchButton {
  position: absolute;
  right: -50px;
  width: 40px;
  height: 36px;
  border: 1px solid #00B4CC;
  background: #00B4CC;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 20px;
}

.icon {
  content: url("https://media.giphy.com/media/PAbELXsl2P7mE/giphy.gif");
  height: 40px;
  width: 40px;
}

<div id="search">
  <input type="text" class="searchTerm" placeholder="What are you looking for?">
  <button type="submit" class="searchButton">
        <i class="icon"></i>
     </button>
</div>

Answer 4

我是内联元素，请尝试

显示：块;

on .icon

Answer 5

#dropbutton:hover + .dropdown-content,
.dropdown-content:hover {
display: block;
}

https://jsfiddle.net/5tm168uk/13/