[Resolved] Add ing font-awsome icon inside search-field and other fields (Filter)

[Author]

Posts

[patrikK-3]

im trying using this but its not working. I like to add a magnifyer at the start (inside) the field. but i really cand get it to work.
What do i miss.

.wpv-custom-search-filter__input input[type="text"]:before {
font-family: 'FontAwesome';
position: absolute;
top: 1px;
left: 1px;
content: "\f002";
}

what i cant see is if there is a setting for background-color of the field ? Did you miss that ?=:)
i only can find for the Label:)

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

Your observation is correct and at the moment, the “Custom Search Filter” block's settings include the option to set the background color for the label element, but not for the input element itself.

I've shared this with the concerned team and will keep you updated through this ticket.

For now, you can use custom CSS code to set the background color for the input search field, for example:

.wpv-custom-search-filter__input input[type="text"] {
    background: #ccc;
}

If you still face any difficulty in showing the icon inside the field, you're welcome to share a link to a page where this search field can be seen

regards,
Waqar

[patrikK-3]

thanks. Yes i got it with the css.

im trying using this but its not working. I like to add a magnifyer at the start (inside) the field. but i really cand get it to work.
What do i miss.

.wpv-custom-search-filter__input input[type="text"]:before {
font-family: 'FontAwesome';
position: absolute;
top: 1px;
left: 1px;
content: "\f002";
}

[Waqar]

Thanks for writing back.

To see what is missing, I'll need to see the search field with which you're trying to add the icon.

Can you please share the link to a page where I can see it?

[patrikK-3]

Pls do this private and also in description
i was selecting wrong radio.... pls.

[Waqar]

I've set your next reply as private and will wait to hear back from you.

[Waqar]

Thank you for sharing the admin access.

I apologize for the delay in getting back on this, as we had an unusually busy queue over the weekend.

To include a font awesome search icon in your view's text search field, you can follow these steps:

1. In your view's "Custom JS" field, you can include this script:

jQuery( document ).ready(function() {
jQuery( '<i class="submit-icon"></i>' ).insertBefore( jQuery( 'input[name="wpv_post_search"]' ) );
});

2. Next, you can update the custom CSS code included in the theme's "style.css" file, from:

.wpv-custom-search-filter__input input[type="text"]:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 1px;
    left: 1px;
    content: "\f002";
}

To:

.form-group .submit-icon {
position: relative;
z-index: 1;
right: -8px;
top: 0px;
color: #7B7B7B;
cursor: pointer;
width: 0;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.form-group .submit-icon:before {
content: "\f002";
}

.form-group input[name="wpv_post_search"] {
padding-left: 35px;
margin-top: -34px;
}

I hope this helps and for more personalized assistance around custom code, you can also consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

[patrikK-3]

You ARE the best !!!! Thank you!!!!!

[patrikK-3]

My issue is resolved now. Thank you!