私はブートストラップglyphiconsとCSSで画像を置き換えたい

Question

ブートストラップGlyphiconsで画像を交換し

ここ

私のコード：これは、コードのプレビューです

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

：実は

は、それが働きましたしかし、私はブートストラップのグリフィコンと置き換えたいのですが、画像を拡大すると画像がぼやけて表示されます。

画像をCSSのブートストラップグリフィンで置き換える？任意の提案が評価されます

Answer 1

ここに私の更新コードCSSで画像を交換し、

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

素晴らしいフォントを使用するには、これは、それが目のフォントを表示するコード

のpreviewですズームインするとすばらしいアイコンがぼやけません

Answer 2

チェックアウトこのグリッドのテキストボックスを検索します。

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