Kendo Panel Bar Change collapse icon

Question

Hi was trying hard to replace the kendo panel bar expand and collapse icon with bootstrap glyphicon-chevron-right. One way I can think is using javascript, literally replacing each and every state of icon. I have also noticed that kendo panelbar adds the following css to the span like:

k-icon k-i-arrow-s k-panelbar-expand  -- when collapsed

k-icon k-i-arrow-n k-panelbar-collapse-- when expanded

I have tried doing this

#leftcontentnav .k-panelbar > li > span >.k-icon {
    background-color: transparent;
    opacity: 0.8;
    border-color: transparent;
    display: inline-block;
    width: 16px;
    height: 16px;
    overflow: hidden;
    background-repeat: no-repeat;
    font-size: 0;
    line-height: 0;
    text-align: center;
    background-image: url('../Images/download.jpg');
}

But I have downloaded a glyphicon and even that doesn't work properly.. is there any solution?

Answer 1

You can do with changing the position of the image on the glyphicon in your css

example:

.k-i-arrow-s { background-position: -96px 0; }
.k-i-arrow-n { background-position: -120px 0; }

You must calculate the position on your glyphicon image.

Answer 2

An important thing to realize about Glyphicons, is that they're font characters. If you want to use them to replace the icons purely with CSS it's a simple matter of hiding the existing icon, and inserting a Glyphicon in it's place.

First hide the Kendo icon image, and add the appropriate font:

.k-panelbar .k-icon {
    background-image: none;

    font-family: 'Glyphicons Halflings';
    font-size: 1em;
    overflow: visible;
}

Then insert the character you wish to use with the ::before selector:

.k-panelbar-expand::before {
    content: "\e114"; /* glyphicon-chevron-down */
}

.k-panelbar-collapse::before {
    content: "\e113"; /* glyphicon-chevron-up */
}