Use an Icon for Filter instead of ALL

The link provided by you displays a 404 page. Can you pls provide the updated link so that we can try providing the Custom CSS? Thanks.

sorry I put 2 links in the page I need help with and it looks like they were joined

https://gayfriendlymarket.com/community/events/is the page I want to apply the Icon to replace ALL for the 2 right hand filters in the footer.

Similar to how it is applyed as a style by my Javo theme here https://gayfriendlymarket.com/contact-gay-friendly-market/ in the footer filters

Thanks,

Gwen

Can you pls see if the following helps –

.lae-block-header-4 .lae-heading span:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f005";
    margin-right: 10px;
}

You can target specific blocks by using the ID set by Elementor for each block.

I tried your suggested code, but it placed a Star icon

before

my Block Header.

I think we are close though. For my footer at https://gayfriendlymarket.com/contact-gay-friendly-market/

What I am looking for is to completely replace the Block Filter
<div class=”lae-block-filter”><div class=”lae-block-filter-dropdown”><div class=”lae-block-filter-more”><span>All</span>
with the Fa Bars Icon which I believe is content: “\f0c9″;

I see the css for the Filter in the https://gayfriendlymarket.com/community/events/ Footer hints at the solution for their css ul.shortcode-filter but I am not sure which parts would apply to achieve my solution
ul.shortcode-filter {
display: inline-block;
padding: 0;
margin-bottom: 0;
}

ul.shortcode-filter li {
/*white-space: nowrap;
font-size:13px;
font-weight:300;
cursor:pointer;
display:block;
padding:0;
margin:10px;
line-height:1;*/
}

ul.shortcode-filter > li {
font-size: 13px;
display: inline-block;
margin: 0 7px;
cursor: pointer;
height: 35px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
}

ul.shortcode-filter > li.active {
font-weight: bold;
}

ul.shortcode-filter > li.flexMenu-viewMore {
margin-right: 0;
padding-right: 0;
width: 15px;
text-align: center;
}

ul.shortcode-filter > li.flexMenu-viewMore.active ul.flexMenu-popup {
margin-top: 0px;
opacity: 1;
display: block;
}

ul.shortcode-filter > li.flexMenu-viewMore.active > a > i.fa.fa-bars:before {
content: ‘\F00D’;
}

ul.shortcode-filter > li.flexMenu-viewMore i {
color: #9e9e9e;
font-weight: 300;
font-size: 14px;
}

ul.shortcode-filter > li > ul.flexMenu-popup {
position: absolute;
display: block;
z-index: 10;
padding: 0;
margin: 0;
margin-top: -10px;
opacity: 0;
right: 0;
top: 35px;
background-color: #fff;
border: solid 1px #eee;
}

ul.shortcode-filter > li > ul.flexMenu-popup li {
line-height: 15px;
border-bottom: none;
text-align: right;
margin: 0;
padding: 10px 20px 10px 25px;
list-style-type: none;
}

ul.shortcode-filter > li > ul.flexMenu-popup li:hover {
background-color: #f4f4f4;
}

ul.shortcode-filter:after {
content: ”;
display: table;
clear: both;
}

Can you advise further based on this?

Thanks,
Gwen

As much as we would like to help you with this, our time is limited and hence we won’t be able to get too much into the details of what you are trying to accomplish. From the long code listing above, it looks like you are pretty close to the final solution.

Well I gave it another try by using the following code

.lae-block .lae-block-filter span:after {
cursor: pointer;
padding-left: 15px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
display: inline-block;
font-family: ‘Font Awesome 5 Free’;
font-weight: 900;
speak: none;
font-style: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: “\f0c9”;
margin-right: -25px;
}

This resulted in the 3 bars Icon being displayed into the right place within the filter block

But I am still seeing the
Span <ALL> and Dropdown which I want to exclude. I tried using a separate code but did not work
.lae-block-filter-more i.lae-icon-arrow-right3 {
display: none;
}

Any advise on the last part to note show these?

Thanks,
Gwen

Pls see if this helps –

.lae-block-header-4 .lae-heading { 
margin-right: 15px; 
}
.lae-block-header-4 .lae-block-header .lae-block-filter {
    padding: 0;
    }
.lae-block .lae-block-filter .lae-block-filter-more span { 
    display: none; 
}
.lae-block .lae-block-filter .lae-block-filter-more i.lae-icon-arrow-right3 {
display: block;
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900;
    speak: none;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fff !important;
    -webkit-transform: none;
    transform: none;
}
.lae-block .lae-block-filter .lae-block-filter-more i:before {
    content: "\f0c9";
    
}
.lae-block .lae-block-filter .lae-block-filter-dropdown:hover .lae-block-filter-more {
    background-color: transparent;
}

Brilliant! That totally solved it!

Thank you so much.

Gwen