मैं फ़ॉन्ट विस्मयकारी से एक के बजाय एक आइकन के रूप में एक कस्टम छवि को शामिल करने का प्रयास कर रहा हूं जैसा कि आमतौर पर होता है। तो मेरे एचटीएमएल बटन के भीतर, मैं सीएसएस वर्ग का संदर्भ दे रहा हूं जिसमें मेरी स्थानीय छवि की पृष्ठभूमि छवि यूआरएल है जिसे मैं एक आइकन के रूप में उपयोग करना चाहता हूं। हालांकि, यह ब्राउज़र में प्रदर्शित नहीं हो रहा है। ध्यान दें कि सभी कोड पूरी तरह से मान्य हैं।

एचटीएमएल:

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

सीएसएस:

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

enter image description here

1
mts396 11 पद 2017, 11:55

4 जवाब

सबसे बढ़िया उत्तर

सरल विधि है, 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>
2
Hash 11 पद 2017, 14:22

इसे आजमाएं

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>
1
Naren Verma 11 पद 2017, 13:40
    .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/

0
Shiha Mohan 11 पद 2017, 12:54

आप यह कोशिश कर सकते हैं

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

Fiddle http://jsfiddle.net/EFsU8/ और इसका समाधान