Search Box Dashicon Magnifying Glass

[bgigi]

I have a brand new Genesis Sample Theme, with hardly any plugins running in it. I placed the search box in the site header area in the upper right. I have been attempting to implement a magnifying glass next to the search box for awhile now. I was wondering if anyone could please tell me why my Dashicon will not appear. It looks like its loading but just does not appear. A box with a X inside of it appears instead. I just moved over to Genesis and am trying to wrap my head around this.

This is srikats code I found on github, however I have tried probably 5-6 different full tutorials, scripts, examples and even attempted my own. I tried also following braddalton and Rick R. Duncans dashicons tutorial. Making notes and going step by step and same issue, just a box with an X inside of it. Where the magnifying glass dashicon should appear its just a box with an X in it. I tried it in multiple browsers, cleared cache everything. I just cannot get the dashicon to appear at all.

Enqueue Dashicons - functions.php

//* Enqueue Dashicons
add_action( 'wp_enqueue_scripts', 'enqueue_dashicons' );
function enqueue_dashicons() {

	wp_enqueue_style( 'dashicons' );

}

//* Customize search form input button text
add_filter( 'genesis_search_button_text', 'sk_search_button_text' );
function sk_search_button_text( $text ) {

	return esc_attr( '' );

}

Change Text on Search Box - functions.php

//* Customize search form input box text
add_filter( 'genesis_search_text', 'sp_search_text' );
function sp_search_text( $text ) {
	return esc_attr( 'Search' );
}

CSS for Dashicon - Style.css

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* Firefox 18- */
input:focus::-moz-placeholder { color:transparent; } /* Firefox 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* oldIE ;) */
 
.search-form {
	position: relative;
}
 
.search-form input[type="submit"] {
	position: absolute;
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 20px/1 'dashicons';
	vertical-align: top;
	clip: inherit;
	width: 20px;
	height: 20px;
	background: transparent;
	color: #999;
	right: 10px;
	top: 17px;
}
 
.search-form input[type="submit"]:hover {
	color: #F15123;
}
 
.site-header .search-form {
	width: 189px;
}

[Erik D. Slater]

Can you please provide us with a link to your website?

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[bgigi]

Yes Eric D. Slater, sorry about that. The link is here, I just started the website so it is extremely in early stage right now. I just turned off maintenance mode,

myconsumerreviews.com

Thank you so much for the response. You can see next to the search box. The dashicon which I thought would appear to be a magnifying glass.

[Victor Font]

This reply has been marked as private.

[Erik D. Slater]

The reason your CSS is not kicking in is because you have placed it inside media only screen and (max-width: 800px).

Whatever CSS stuffies you added recently, you need to move it above your media queries section 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[bgigi]

Thank you Victor, The code piece in the copy and paste got messed up. It is really, "return esc_attr( '' );" , thank you! Erik D Slater, I will begin researching that as soon as I can and fix it. Thank you for taking the time to look at this problem.

[Victor Font]

You embedded your css code in a media query for a screen 800px or smaller. Move the code out of the media query.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Annamarie]

Hi,

Found this because I too am wanting the dashicon. And am a bit frustrated at making it work. I'm a beginner in Genesis and not a professional web person.

I can hardly believe I have anything to help you .. but I do.

I've learned that in Genesis it's always a good idea to put your new code above the media queries which are at the end of your child theme styles.css. (Contrary to my experience with Thesis.) I've also learned (someone can correct me if I'm wrong) that it's a really good idea to put your customizations in the right place in the css file. Follow the table of contents. I don't know why that is.

Having said that - I'll try to learn from your code to see if I can get this to work. : )

THanks
Annamarie

[bgigi]

Yes Annamarie, I am quite new as well. I do not really understand the helpful information they posted about moving the code out of the media query but it is now time to learn. I will post back as soon as I find my solution. It may be awhile but I never give up. 🙂

[Annamarie]

Hi,

I feel your pain.

So at the bottom of your child theme - I'm also using Genesis sample - somewhere around line 2778 (I do have customizations so it might be above that) there is a Section commented out that says #Media Queries - everything after this is for making your site responsive! There's lots to learn here.

Make sure your code goes above that section. You might also want to put it in the Search section.

Good luck!

[Erik D. Slater]

I’ve also learned that it’s a really good idea to put your customizations in the right place in the css file ... I don’t know why that is.

Browsers - and other screen readers - apply style definitions in the order in which they appear inside the HTML document, i.e. quite literally, going from the beginning to the end. So, if style Y appears after style X that affects the same part of your page, Y will take priority.

Then you get to the media queries - the responsive stuff (not just for "mobile", btw) - which, in Genesis, are defined from top to bottom - in order of maximum width. This means, you only need to define something at the higher-width level for it to take effect at the lower widths.

In this case - with the magnifying glass icon being defined inside the max-width: 800px section, you would only see the magnifying glass when your width is 800px or less.

Hope that begins to make some sort of sense 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[bgigi]

Yes Annamarie, that did help! I positionedl all my child theme media queries and there is the magnifying glass! Thank you so much it is now working fine. I just moved these values at the bottom of the child stylesheet and put them where they are suppose to go. Now the magnifying glass is there ! Thank you all in this post for your help I really appreciate.

================================LINE 647 added

.search-form {
	position: relative;
}

================================

================================LINE 662 added

.search-form input[type="submit"] {
	position: absolute;
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 20px/1 'dashicons';
	vertical-align: top;
	clip: inherit;
	width: 20px;
	height: 20px;
	background: transparent;
	color: #999;
	right: 10px;
	top: 17px;
}

================================

================================LINE 677

.search-form input[type="submit"]:hover {
	color: #F15123;
}

================================

did not add yet
================================

.site-header .search-form {
	width: 189px;
}

================================

[Annamarie]

Okay! I'm going to copy your code..

SO happy I was able to help someone. Usually I'm the one asking. : )

[Author]

Posts