CODEWITHSUNDEEP
csstwitter-bootstrap
Victor Huang
Victor Huang

Reputation: 41

Replace image with Bootstrap Glyphicons

I want to replace image in css with bootstrap glyphicons

here my 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;
}

this is the preview of the code: preview

Actually, it worked, but I want to replace it with bootstrap glyphicons because from the image I attached when I zoom in it show the image become blur

so I want to ask, how to replace image with bootstrap glyphicons in css? any suggestion would be appreciated

Upvotes: 0

Views: 982

Answers (2)

Victor Huang
Victor Huang

Reputation: 41

Here my update code to replace image in css and using font awesome

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

and this is the preview of the code

it show the eye font awesome icon don't blur when i zoom in

Upvotes: 1

Sachin Sanchaniya
Sachin Sanchaniya

Reputation: 1044

Checkout This Search Textbox with 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>

Upvotes: 0

Related Questions