用Bootstrap Glyphicons替换图像

Question

我想用bootstrap 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中的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";
}

这是代码的preview

它显示当我放大时，眼睛字体很棒的图标不会模糊

Answer 2

使用glyphicon签出此搜索文本框。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;