search

asotog / squeezebox

Simple Angular 2 accordion component
19 stars 8 forks source link

Cannot change the plus icon. #10

Closed tanmoycsit closed 7 years ago

tanmoycsit commented 7 years ago

I want to change the + icon into > and cross icon into down arrow. How can i do this?

asotog commented 7 years ago

Hi @tanmoycsit via css, it depends how you want to do this, for example lets say you want to use a png or svg for the icon, first you need to remove the default styles:

.squeezebox .sb-item-head a .toggle-icon:before,
.squeezebox .sb-item-head a .toggle-icon:after {
    display: none;
}

and use your icon:

.squeezebox .sb-item-head a .toggle-icon {
    background-image: url( . . . );
    background-size: . . . .;
    ...
}
tanmoycsit commented 7 years ago

Hello @asotog before your suggestion i found a temporary solution like 

.squeezebox .sb-item-head a .toggle-icon:before {
border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 4px;
     transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

But your result is better then min. :) thanks for help.