HTML自定义（非字体）图标类不工作

我正在尝试将自定义图像作为图标，而不是像通常情况那样从Font Aweasome中添加。因此，在我的HTML按钮中，我引用了CSS类，它包含我想用作图标的本地图像的背景图像url。但是，它不会显示在浏览器中。请注意，所有代码都经过充分验证

HTML:

小提琴：

#搜索{
宽度：100%；
位置：相对位置；
}
.搜索术语{
浮动：左；
宽度：100%；
边框：3px实心#00B4CC；
填充物：5px；
高度：20px；
边界半径：5px；
大纲：无；
颜色：#9DBFAF；
}
.搜索词：焦点{
颜色：#00B4CC；
}
.搜索按钮{
位置：绝对位置；
右：-50px；
宽度：40px；
高度：36px；
边框：1px实心#00B4CC；
背景：#00B4CC；
文本对齐：居中；
颜色：#fff；
边界半径：5px；
光标：指针；
字体大小：20px；
}
.图标{
背景：url（'https://postimg.org/image/bfac47qav/');
}

您可以试试这个

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/

及其解决方法您也可以检查它

您可以试试这个

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/

及其在中的解决方法您也可以检查它

试试这个

根据@fbuchlak建议的答案，将

display:block

添加到类图标中，但您还必须检查图像路径

这不是图像的正确路径

这是正确的道路

下面是一个例子

#搜索{
宽度：100%；
位置：相对位置；
}
.搜索术语{
浮动：左；
宽度：100%；
边框：3px实心#00B4CC；
填充物：5px；
高度：20px；
边界半径：5px；
大纲：无；
颜色：#9DBFAF；
}
.搜索词：焦点{
颜色：#00B4CC；
}
.搜索按钮{
位置：绝对位置；
右：-50px；
宽度：40px；
高度：36px；
边框：1px实心#00B4CC；
背景：#00B4CC；
文本对齐：居中；
颜色：#fff；
边界半径：5px；
光标：指针；
字体大小：20px；
}
.图标{
背景：url（'https://s7.postimg.org/5ecn753or/search-icon.png');
宽度：20px；
高度：20px；
背景位置：中心；
背景尺寸：封面；
显示：块；
}

---

试试这个

根据@fbuchlak建议的答案，将

display:block

添加到类图标中，但您还必须检查图像路径

这不是图像的正确路径

这是正确的道路

下面是一个例子

#搜索{
宽度：100%；
位置：相对位置；
}
.搜索术语{
浮动：左；
宽度：100%；
边框：3px实心#00B4CC；
填充物：5px；
高度：20px；
边界半径：5px；
大纲：无；
颜色：#9DBFAF；
}
.搜索词：焦点{
颜色：#00B4CC；
}
.搜索按钮{
位置：绝对位置；
右：-50px；
宽度：40px；
高度：36px；
边框：1px实心#00B4CC；
背景：#00B4CC；
文本对齐：居中；
颜色：#fff；
边界半径：5px；
光标：指针；
字体大小：20px；
}
.图标{
背景：url（'https://s7.postimg.org/5ecn753or/search-icon.png');
宽度：20px；
高度：20px；
背景位置：中心；
背景尺寸：封面；
显示：块；
}

.searchButton{
背景：#fff url(http://pixsector.com/cache/e7836840/ave6d43d85eb121839a10.png)不重复；
背景尺寸：包含；
宽度：4%；
高度：21px；
}

.searchButton{
背景：#fff url(http://pixsector.com/cache/e7836840/ave6d43d85eb121839a10.png)不重复；
背景尺寸：包含；
宽度：4%；
高度：21px；
}

---

简单的方法是，使用

内容。不要使用
background


#搜索{
宽度：100%；
位置：相对位置；
}
.搜索术语{
浮动：左；
宽度：100%；
边框：3px实心#00B4CC；
填充物：5px；
高度：20px；
边界半径：5px；
大纲：无；
颜色：#9DBFAF；
}
.搜索词：焦点{
颜色：#00B4CC；
}
.搜索按钮{
位置：绝对位置；
右：-50px；
宽度：40px；
高度：36px；
边框：1px实心#00B4CC；
背景：#00B4CC；
文本对齐：居中；
颜色：#fff；
边界半径：5px；
光标：指针；
字体大小：20px；
}
.图标{
内容：url（“https://media.giphy.com/media/PAbELXsl2P7mE/giphy.gif");
高度：40px；
宽度：40px；
}
简单的方法是，使用
内容。不要使用
background


#搜索{
宽度：100%；
位置：相对位置；
}
.搜索术语{
浮动：左；
宽度：100%；
边框：3px实心#00B4CC；
填充物：5px；
高度：20px；
边界半径：5px；
大纲：无；
颜色：#9DBFAF；
}
.搜索词：焦点{
颜色：#00B4CC；
}
.搜索按钮{
位置：绝对位置；
右：-50px；
宽度：40px；
高度：36px；
边框：1px实心#00B4CC；
背景：#00B4CC；
文本对齐：居中；
颜色：#fff；
边界半径：5px；
光标：指针；
字体大小：20px；
}
.图标{
内容：url（“https://media.giphy.com/media/PAbELXsl2P7mE/giphy.gif");
高度：40px；
宽度：40px；
}

你能把它上传到一些在线编辑器吗？至少我们能看到它的结构。你有没有试过指定
背景大小，例如：
背景大小：contain
？另外，您能确认该图标的文件路径是否有效吗？我将上传到编辑器@PannaDas@mts396请分享link@UncaughtTypeError我可以确认文件路径是否正确。我试过背景尺寸：contain和其他尺寸，仍然没有显示。你能上传到一些在线编辑器吗？至少我们可以看到结构。你试过指定
背景尺寸吗？例如：
背景尺寸：contain
？另外，你能确认这个图标的文件路径是有效的吗？我会上传
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;
    }

    .searchButton {
    background: #fff url(http://pixsector.com/cache/e7836840/ave6d43d85eb121839a10.png) no-repeat;
    background-size: contain;
    width: 4%;
    height: 21px;
}



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