與引導Glyphicons更換圖像

Question

我想和引導glyphicons替換CSS圖像

這裏我的代碼：

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

這是代碼的預覽：

其實，它的工作，但我想用bootstrap glyphicons來替換它，因爲從我附加的圖像當我放大顯示圖像變得模糊時

所以我想問一下，如何在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

結帳此搜索文本框與glyphicon。

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