Gravatar for anweshadastider@gmail.com

Question by anwesha, Feb 2, 2017 3:43 AM

Customize search box icon (magnifying glass)

Please let me know the best way to change the default coveo search icon to any other icon that I want for my site search box. I would like to maintain the animation that happens on click of this button as well.

1 Reply
Gravatar for flguillemette@coveo.com

Answer by François Lachance-Guillemette, Feb 2, 2017 9:23 AM

You can override CSS class just like any CSS rule.

The icon is under the .CoveoSearchButton > .coveo-icon rule, so if you create a new rule that has higher priority, it will override the image.

Use a standard background-image: url(./yourImage.png); and adjust the background-size property to fit your image in it.

Hope this helps!

FLG

Gravatar for anweshadastider@gmail.com

Comment by anwesha, Feb 3, 2017 1:47 AM

Thanks! I tried the approach that you suggested. I updated the above css rule with my image but when a query executes i can not get the spin animation to work. It makes my icon rotate as well.

alt text

Gravatar for jflheureux@coveo.com

Comment by Jean-François L'Heureux, Feb 3, 2017 7:21 AM

When a query is being performed, a new CSS class (coveo-executing-query) is added to the main search interface element.

In that state, the search button icon has different CSS rules in addition to some CSS animation:

.coveo-executing-query .CoveoSearchButton > .coveo-icon {
    background-position: -11337px 0px;
    width: 16px;
    height: 16px;
    text-indent: 16px;
}

If the CSS rule you added has more priority than the rule above, your icon will be used instead of the spinning loading icon defined by default by the Coveo styles.

Ask a question