How to change bootstrap date picker icons

[shahzadsiddiqui8]

I am trying to change “glyphicon-calendar” to my customize below icon but the icon is not replacing, please suggest me how i can replace this glyphicon-calender to my custom icon…

<div class="col-lg-8">
												<div class="start-date">
												  <div class='input-group date' id="time-start">
													<input type='text' class="form-control input-md" placeholder="DD/MM/YYYY" readonly>
													<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
												  </div>
												</div>
											  </div>
.calender-icon{
background:url("../images/claendar_icon.png") no-repeat;
height:26px;
width:29px;
border:1px solid #000;
}

<img src="/community/uploads/default/original/3X/b/b/bb4d30d61466cadfb0b74138d2197e3c30d2fc1f.png" width="26" height="29"> 

<img src="/community/uploads/default/original/3X/d/d/ddca970851bdd908d6345a91fbeaddc86daa9ed4.png" width="507" height="69">

[RyanReese]

Could we get a live look?

Did you just replace the files (kept the same name) to update the icon?

It’s possible you are just seeing the cached version.

Either way, we don’t have enough to get a reproduce-able test version .

[shahzadsiddiqui8]

Hi Ryan,

here is the link of my live look…
http://www.metalsauda.com/GlobalLogistics/23-07-2015/Regnwhdr.html

I tried to keep the same name i.e. “calender-icon” which I have update in my css but getting below result:

thanks.

[RyanReese]

Hi.

The icon is being generated via this

.glyphicon-calendar:before {
    content: "\e109";
}

What’s the new font icon value?