Support » Plugin: Livemesh Addons for Elementor Page Builder » Use an Icon for Filter instead of ALL

  • Resolved m4group

    (@m4group)


    Hi there,

    Love your Post Grid widget!
    I believe it was integrated with my sites Javo Theme.

    And now I am trying to echo the way that they used an Icon in the Filter (see the contact us footer sample)

    I would like to replace the Filter “ALL” with a Canvas Icon using the Elementor Bars .fa-bars:before { content: “\f0c9”;}

    Could you kindly guide me with the CSS to make this happen?

    Thanks,
    Gwen

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author livemesh

    (@livemesh)

    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

    Plugin Author livemesh

    (@livemesh)

    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

    Plugin Author livemesh

    (@livemesh)

    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.

    m4group

    (@m4group)

    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

    Plugin Author livemesh

    (@livemesh)

    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;
    }
    m4group

    (@m4group)

    Brilliant! That totally solved it!

    Thank you so much.

    Gwen

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.