Replace Filter text and arrow with Pure CSS icon

[glennrocksvb]

Add the below CSS code in css_additional template in AdminCP or in Sitebuilder > Style > CSS Editor to replace all instances of the Filter button in conversation toolbar with pure CSS icon without using an image.

.filter-wrapper .label {
    margin-left: 3px;
    margin-top: 5px;
    width: 1px;
    height: 0;
    border-left: solid 7px transparent;
    border-right: solid 7px transparent;
    border-top: solid 7px #333;
    text-indent: -99999px;
    position: relative
}

.filter-wrapper .label:before {
    content: '';
    left: -1px;
    top: -5px;
    height: 7px;
    width: 0;
    border-top: solid 3px transparent;
    border-left: solid 3px #333;
    border-bottom: solid 3px transparent;
    display: block;
    position: absolute;
}

.toolbar-filter:hover .filter-wrapper .label,
.toolbar-filter .filter-wrapper.selected .label {
    border-top-color: #019dce;
}

.toolbar-filter:hover .filter-wrapper .label:before,
.toolbar-filter .filter-wrapper.selected .label:before {
    border-left-color: #019dce;
}

.toolbar-filter .arrow {
    display: none;
}

.conversation-toolbar-wrapper .conversation-toolbar .toolbar-filter .filter-wrapper.selected {
    margin-top: 1px;
}

.conversation-toolbar-wrapper .conversation-toolbar .toolbar-filter .filter-wrapper {
    outline: none;
}

.conversation-toolbar-wrapper .conversation-toolbar .toolbar-filter .filter-wrapper.selected {
    margin-top: -5px;
    padding-top: 5px;
}

Customizations:

1. Replace both instances of #333 with the desired Filter icon color.
2. Replace both instances of #019dce with the desired color of Filter icon when hovered or selected.

Enjoy!

[Fleiding]

Awesome, you rock!