ersetzen Bild mit Bootstrap Glyphicons

Question

I Bild in CSS mit Bootstrap glyphicons ersetzen möchten

hier mein Code:

.inputShowPwd > .showpass { 

    display: none; 
    position: absolute; 
    height: 24px; 
    width: 24px; 
    top: 50%; 
    margin-top: -12px; 
    right: 6px; 
    background:url(image/show.png) 50% 50% no-repeat; 
} 

dies die Vorschau des Codes ist:

Eigentlich ist es funktionierte wollen, aber ich es mit Bootstrap glyphicons zu ersetzen, weil aus dem Bild angebracht ich, wenn ich in ihm, ich das Bild geworden Unschärfe

so möchte fragen, zeigen heran wie Bild mit Bootstrap Glyphicons in CSS ersetzen? jeder Vorschlag würde

Answer 1

Hier Code meines Update Bild in CSS zu ersetzen und mit Schrift ehrfürchtigem

.inputShowPwd > .showpass { 
    display: none; 
    position: absolute; 
    height: 24px; 
    width: 24px; 
    top: 50%; 
    margin-top: -10px; 
    right: 2px; 
} 
.inputShowPwd > .showpass:after { 
    content:"\f06e"; /*this is unicode of eye on font awesome*/ 
    font-family: "FontAwesome"; 
} 

und dies ist die preview des Codes

es das Auge Schrift anzeigen ehrfürchtiges Symbol verwischt nicht, wenn ich hereinzoomiere

Answer 2

Kasse Diese Suche Textbox mit glyphicon geschätzt.

#imaginary_container{ 
 
    margin-top:20%; /* Don't copy this */ 
 
} 
 
.stylish-input-group .input-group-addon{ 
 
    background: white !important; 
 
} 
 
.stylish-input-group .form-control{ 
 
\t border-right:0; 
 
\t box-shadow:0 0 0; 
 
\t border-color:#ccc; 
 
} 
 
.stylish-input-group button{ 
 
    border:0; 
 
    background:transparent; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
\t <div class="row"> 
 
     <div class="col-sm-6 col-sm-offset-3"> 
 
      <div id="imaginary_container"> 
 
       <div class="input-group stylish-input-group"> 
 
        <input type="text" class="form-control" placeholder="Search" > 
 
        <span class="input-group-addon"> 
 
         <button type="submit"> 
 
          <span class="glyphicon glyphicon-eye-open"></span> 
 
         </button> 
 
        </span> 
 
       </div> 
 
      </div> 
 
     </div> 
 
\t </div> 
 
</div>