Forums Forums Search & Filter Pro I want to put an icon in the Date part, is there any document on how to fix it?

Viewing 10 posts - 1 through 10 (of 11 total)
  • Anonymous
    #241434

    I want to put an icon in the Date part, is there any document on how to fix it?
    I can only do basic html, css

    http://brila.co.kr/wp-content/uploads/1.jpg

    Trevor
    #241439

    Clicking in the date field pops up the datepicker, so maybe the icon would be best at the right of the date field, maybe inside the date field, so that clicking it still pops up the datepicker? That means you would have two of them. I am guessing it could be done using the after pseudo class.

    Can you confirm that might be what you want?

    Anonymous
    #241696

    Thank you. I am using the plugin too well. Which file should I enter img html to put the icon next to the calendar filter?

    Trevor
    #241703

    What I was suggesting was doing this (I am not sure it is possible, but I can try):

    https://www.screencast.com/t/3QqmwMkgKV67

    Is that acceptable to you? It would use CSS and no images (instead us an icon, from maybe Font Awesome or Dashicons).

    Anonymous
    #241717

    Oh thank you, and I have another question, how do I select and filter three categories at the same time?

    Trevor
    #241728

    If you want me to make the CSS for you, are you able to send me a live link/URL to your search page so I can take a look?

    You can only have Category, Tag or each custom taxonomy once on a form, so you would need to follow the advice in this post:

    https://support.searchandfilter.com/forums/topic/elementor-filter-not-working-showing-all-results/#post-221562

    Anonymous
    #241734
    This reply has been marked as private.
    Trevor
    #241879

    In your theme customizer, in the Custom CSS, add this:

    .searchandfilter[data-sf-form-id="7184"] ul.sf_date_field > li:after {
      content: "\ec051";
      height: 40px;
      width: 40px;
      vertical-align: middle;
      line-height: 40px;
      font-size: 20px;
      transform: rotateY(180deg);
      color: #fff;
      text-align: center;
      font-weight: 400;
      font-family: icomoon-the7-font;
      position: absolute;
      margin-left: -40px;
      background: #c00f41;
    }

    This uses the same icon and font as the search in your theme header.

    Anonymous
    #241884
    This reply has been marked as private.
    Trevor
    #241888

    Is it OK to close this thread for now?

Viewing 10 posts - 1 through 10 (of 11 total)