0

I want to hide search from

<i class="far fa-search">search</i>

using css. Before we were using material icons

<i class="material-icons">mode_edit</i>*

and there it was hidden (mode_edit)

I already tried looking around, but couldn't figure a way out using only css.

Claus Spitzer
  • 34
  • 7
  • 1
    @Gosi That would hide the entire icon. OP wants to hide only the text, keeping the icon intact. – GBWDev Aug 08 '19 at 08:45
  • OP consult their docs on how to do this correctly, so that your icon also remains accessible. https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility#web-fonts-semantic Essentially, wrap the text in a span tag and hide the span. – GBWDev Aug 08 '19 at 08:46
  • lol, that means just remove the text? as in like, backspace the text within ? – Gosi Aug 08 '19 at 08:46
  • 1
    I'm assuming he means to hide text but to keep for screen readers, or when the icon font fails to load or something. – GBWDev Aug 08 '19 at 08:47

1 Answers1

0

You can just delete 'search' from inside the tags. so it will look like this:

<i class="far fa-search"></i>

if you wanted to keep the text for screen readers you could do this:

<i class="far fa-search"><span class="hidden">Search</span></i>

css file should have:

.hidden{display:none;}

Luc Cannon
  • 41
  • 2
  • All else being equal, `class="hidden"`won't hide anything. – Quentin Aug 08 '19 at 08:54
  • Youre right, i assumed OP would have a good enough understanding off CSS to implement the class, Ive updated my answer in case they dont – Luc Cannon Aug 08 '19 at 08:56
  • 1
    Re edit: The usual goal of having an icon with associated hidden text is to provide content that is friendly to screen reader and search engine software. Using `display: none` will hide the text from screen readers and risk looking like keyword stuffing to search engines. – Quentin Aug 08 '19 at 08:58