Community Forums › Forums › Archived Forums › Design Tips and Tricks › Adding a Magnifying Glass Icon to Search Bar
- This topic has 8 replies, 3 voices, and was last updated 9 years, 5 months ago by Graham.
-
AuthorPosts
-
April 25, 2015 at 5:32 pm #149165alethamcmanamaMember
Hi,
My client wants to add a magnifying glass icon to the search bar on this site (Enterprise Pro child theme):
http://srinikahealing.com/draft/
How would I go about adding this to the style sheet?
Thanks, in advance, for your help.
Warmly,
http://srinikahealing.com/draft/
Aletha McManamaApril 26, 2015 at 1:30 am #149173Brad DaltonParticipantApril 26, 2015 at 12:21 pm #149206alethamcmanamaMemberBrad,
I added the hour-glass icon to the theme's stylesheet, but it did not work. Here's the code I found and added it to. Is this the right place to add it? I noted below (in a box) the code I needed for the hour-glass icon.
.genesis-nav-menu > .search input {
font-size: 12px;
font-color: #810220;
background color: #F1ECD8;
content: "\f179";
padding: 6px 22px;
}Thanks for your help.
Warmly,
AlethaApril 26, 2015 at 12:28 pm #149212Brad DaltonParticipantThere's 2 steps
Load the dash icons using PHP code
Then add CSS to the class you want to use them with.
April 26, 2015 at 1:33 pm #149213alethamcmanamaMemberBrad,
That worked. I like the search form with the hour-glass icon in it.
One last question, please:
When I type text in the search form box, it cuts off the bottom of the text. I tried to locate the style code to increase the height, but couldn't locate it. Can you let me know where you would code it in the style sheet? I tried to add it to the style code below, but it would remove the hour-glass icon. Here's the link to the home page again:
http://srinikahealing.com/draft/.nav-primary .search-form input[type="search"] { width: 160px; } .nav-primary .search-form input { content: "\f179"; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 16px/1 'dashicons'; vertical-align: top; }
I'm almost there! Thanks.
Aletha
April 27, 2015 at 4:57 am #149268alethamcmanamaMemberBrad,
Also, my client has requested the hour-glass icon show as right-aligned inside the search block. Tried adding 'align: right;' to the above CSS code, but that did not work. Help with this question too, please?
Look forward to hearing back from you on this. Thanks!
Warmly,
Aletha McManamaApril 27, 2015 at 5:41 am #149269Brad DaltonParticipantApril 27, 2015 at 7:57 am #149292alethamcmanamaMemberBrad,
Your CSS code above did not work when I added it to any of the code above in my earlier message. What happened is the search button moved in front of the text field instead of the magnifying glass moving to the right inside of the text field. Any other ideas on how to make this work?
Help!
Thanks.
AlethaMay 23, 2015 at 2:56 am #153384GrahamMemberIs this resolved?
I see a magnifying glass ( not hour glass) aligned right - but perhaps still a need to increase height?
The following padding tidied it up a bit for me
.genesis-nav-menu > .search input { padding: 5px 28px 5px 8px; }
and to push the glass icon down a bit, I increased the top by a couple of pixels
.genesis-nav-menu .search-form input[type="submit"] { top: 6px; }
My JustGiving page: https://www.justgiving.com/helping-graham-give
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.