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;
}

小提琴：

 #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/'); } 

 <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 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/並解決了使用<button>元素內的圖像你也可以檢查一下

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

我是內聯元素 ，試試

顯示：塊;

在.icon

Answer 5

    .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>

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