Search function in navigation menu

Questions › Category: Customization › Search function in navigation menu
0 Vote Up Vote Down
Jordan King asked 4 years ago

Hello! It looks like there is a search function in the menu but the icon is a box. I cannot find where this is located in order to change the icon. I looked in my menus but cant seem to find it. Could someone assist me with that? I’m using the Hello Boho theme. 

2 Answers
0 Vote Up Vote Down
Support Team Staff answered 4 years ago

If you go to line 1203 in your style sheet you will see the section that will modify the icon.  It is using a font awesome icon, and you should be able to swap it to any other icon you would like.

Jordan King replied 4 years ago

I would like the search icon, but it’s showing a box instead. This is what I see in the style sheet and I’m not sure where I put the typical: . I copied and pasted my coding in the style sheet below:
li a.icon-search:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
content: “\f002”;
}

li a.icon-search {
cursor: pointer;
font-size: 12px;
}

/*li a.icon-search:hover {
border-bottom: none;
}*/

0 Vote Up Vote Down
Jennifer Staff answered 4 years ago

If it is showing as a box, then it may be that your site is blocking the outgoing script.  You can get around this by installing the font awesome plugin. 

Desert momma replied 4 years ago

I had the same issue with the HelloChic theme. I just fixed it by getting that plugin (thank you!) Is there another way to fix it so I don’t have so many plugins?

Jennifer Staff replied 4 years ago

It can be changed to a different icon style, then you can remove the font awesome plugin.

Desert momma replied 4 years ago

are there instructions I can find that would tell me how to do that?

Desert momma replied 4 years ago

Just following up on this. How do I change it to a different icon style so I can remove the Font Awesome plugin? I need to downsize my plugins

Support Team Staff replied 4 years ago

You can call in an image. Or see if your host is blocking Dashicons and change it to the dashicon icon, if they are not.

Desert momma replied 4 years ago

Are there instructions on how to “call in an image”? or how to change it to a Dashicon?

Support Team Staff replied 4 years ago

On line 992 change the font to Dashicons and then the content to “\f179”

Desert momma replied 4 years ago

Ok thank you very much