Search icon (magnifying glass) is not rendered properly in FF

[sophokles73]

The search input field's magnifying glass is not rendered as the magnifying glass icon but as the literal text fl in my browser. See attached screenshot

This seems to be due to the order in which the font-family is defined for the .td-search-input class in _search.scss

.td-search-input {
    ...
    font-family: $font-family-base, $font-awesome-font-name;
}

where the font awesome font is added to the end of the list but one of the fonts before font awesome in the list already contains a value for the  entity.

---

Edit (@chalin):

• Fix for regular search - Fixing FontAwesome icon handling in search placeholder #1247
• Fix for offline search

[sophokles73]

BTW, this occurs when I open the Docsy user guide at https://www.docsy.dev/docs/

My browser is Firefox 105.0.2 on Ubuntu 22.04

[LisaFC]

Huh, that's weird. It's showing up as the magnifying glass icon for me (Chrome on Mac). Any other users with other browsers/OS seeing it? @chalin any ideas?

[sophokles73]

It also displays properly on my Android 11 based smart phone running Firefox ...

[chalin]

Thanks @sophokles73.

Which version of Docsy are you using?

[chalin]

Ah, I'm seeing that problem in FF 105.0.2 under macOS.
No issue in Chrome or Safari under macOS or iOS.

[chalin]

Helvetica Neue is the culprit under FF. The search box will need to be reworked to fix this. I'll give it a try tomorrow or this w/e. @geriom - do you want to wait for this fix?

[sophokles73]

@chalin I am using the HEAD revision of the main branch.

[chalin]

This is going to be more work than I'd like to put in before the next release, so in the queue it goes for me. I think that FF is probably doing things correctly. I have two fixes in mind, one that I've tested but requires more work. The other is a patch that I'll try to get in before the next release if I have the time.

[chalin]

Hey, all: there was a solution that pre-dated even this issue! :)

• Fixing FontAwesome icon handling in search placeholder #1247

[chalin]

I've confirmed that the fix (#1247) works in FF as well as Chrome and Safari.

[chalin]

Reopening since this needs to be fixed for offline search too!