用Bootstrap字形替換圖像

Question

我想用引導字形替換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;
}

這是代碼的預覽：

實際上，它可以工作，但是我想用引導字形替換它，因為從放大時附加的圖像來看，圖像變得模糊

所以我想問一下，如何在CSS中用bootstrap glyphicons替換圖像？ 任何建議將不勝感激

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

這是代碼的預覽

它顯示了我放大時的眼睛字體真棒圖標不模糊

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{ border-right:0; box-shadow:0 0 0; 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"> <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> </div> </div>