5.20241.9

グリッド:フィルターアイコン

CSSを使用して、FlexGridFilterによって表示されるアイコンをカスタマイズできます。

カスタムアイコンを作成するには、次のように指定します。

/* フィルター処理された列に画像を表示します */
.wj-glyph-filter {
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABKUlEQVQ4ja2QP0vDQBiHf/cndzQhJKGGK6HQHFnsII4h4GfQqas4+zGcXDs5dNRPYj+EoFt316CDPZcrhNY0Mb0HnuV43+e4AxxhjKF1XU+bZ3MANwOdH9wghHgAYIZod/8OKqWWRVHc9VEptWwNJklyBeCbUrrRWs8Wi4U4ptZ6RindAPiyu4cEQXALYMsYM57nHZUxZgBs7U47vu/3/ks72wlhjL10xRhjz31iAICqqkac83VbjHO+rqpq1DsIAGEYjoUQH1JK01QI8R6G4fhfsR15nk+SJLlomuf5ZFAMANI0fcTec+3ZacEoilZRFK2cBQGcW90EpZT3ToJKqWtCyCcA43ne28lBAMiy7ExK+UQI+XES3BHH8aWU8tVZ0ELKspx2jznkF5WQhrjMdSwdAAAAAElFTkSuQmCC');
    background-repeat: no-repeat;
    background-position: bottom right;
    margin-top: 2px;
    width: 20px; height: 20px;
    border: none;
}
.wj-glyph-filter:after {
    display: none;
}
/* アクティブなフィルター画像を25%拡大します */
.wj-filter-on .wj-glyph-filter {
    transform: scale(1.25)
}

または、次のように指定して、既存のアイコンの色をカスタマイズします。

/* フィルターグリフの色を変更します */
.wj-glyph-filter {
    color: red;
    font-size: 125%;
}