Placeholder

Anonymous

#111145

I’m designing a project that has to comply with provided PSDs as much as possible. One of the requirements is a magnifying glass as a search placeholder within the textbox. I used a unicode icon to comply as much as possible without breaking plugin conventions, but the sponsor wasn’t satisfied. I need to be able to use a specific icon and need guidance on how accomplish through a CSS edit.

Trevor

#111256

You could use Custom CSS to style the placeholder to use FontAwesome font, and then use the FA code for the search icon & # x f 0 0 2 ;. Maybe? I had to put spaces between each character, so do remove them!!!

Anonymous

#111310

I have tried Better FontAwesome plugin already (https://snag.gy/eD50XT.jpg) and that icon using both fa-search and then the actual html values, but it turns into an empty square (https://snag.gy/eudryf.jpg) and your plugin converts it to that in the admin (https://snag.gy/yrSm9s.jpg). So any advice on how to accomplish this would be great.

Trevor

#111459

Assuming you have font awesome working/loading, can you show me the page (URL/link) when putting the code that I said to use?

Anonymous

#111564

This reply has been marked as private.

Anonymous

#111566

This reply has been marked as private.

Trevor

#111911

Apologies for the delay in responding. Your last reply arrived after we closed our support for the weekend (our normal support hours are Monday – Friday 10am – 5pm GMT) and Monday was a national holiday in the UK.

The CSS for the placeholder (in this case to make its font family font awesome) is a bit complicated to supported most browsers:

.sf-field-search .sf-input-text::-webkit-input-placeholder {
  font-family: 'FontAwesome';
}
.sf-field-search .sf-input-text::-moz-placeholder {
  font-family: 'FontAwesome';
}
.sf-field-search .sf-input-text:-ms-input-placeholder {
  font-family: 'FontAwesome';
}
.sf-field-search .sf-input-text:-moz-placeholder {
  font-family: 'FontAwesome';
}

Anonymous

#112096

Unfortunately this solution didn’t work either so the solution I came up with was to copy the code produced by your search widget and then alter the placeholder attribute with the following solution…

<form data-sf-form-id=’276′ data-is-rtl=’0′ data-maintain-state=” data-results-url=’/results’ data-ajax-url=’/?sfid=276&sf_action=get_data&sf_data=results’ data-ajax-form-url=’/?sfid=276&sf_action=get_data&sf_data=form’ data-display-result-method=’shortcode’ data-use-history-api=’1′ data-template-loaded=’0′ data-lang-code=” data-ajax=’1′ data-ajax-data-type=’json’ data-ajax-target=’#search-filter-results-276′ data-ajax-pagination-type=’normal’ data-ajax-links-selector=’.pagination a’ data-update-ajax-url=’1′ data-only-results-ajax=’1′ data-scroll-to-pos=’0′ data-init-paged=’1′ data-auto-update=’1′ action=’/results’ method=’post’ class=’searchandfilter’ id=’search-filter-form-276′ autocomplete=’off’ data-instance-count=’1′>

<li class=”sf-field-search” data-sf-field-name=”search” data-sf-field-type=”search” data-sf-field-input-type=””> <label><input placeholder=”” style=”font-family:Arial, FontAwesome” name=”_sf_search[]” class=”sf-input-text” type=”text” value=”” title=””></label>

</form>

Anonymous

#112098

Unfortunately the unicode got converted by the text window.

Trevor

#112100

That’s OK. Most bb board forums allow you to enclose code with back ticks (the key next to the 1 key) to stop that from happening. Is this issue now resolved?

[Author]

Posts