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 8 years, 4 months ago by
Graham.
-
AuthorPosts
-
April 25, 2015 at 5:32 pm #149165
alethamcmanama
MemberHi,
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 Dalton
ParticipantApril 26, 2015 at 12:21 pm #149206alethamcmanama
MemberBrad,
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 Dalton
ParticipantThere'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 #149213alethamcmanama
MemberBrad,
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 #149268alethamcmanama
MemberBrad,
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 Dalton
ParticipantApril 27, 2015 at 7:57 am #149292alethamcmanama
MemberBrad,
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 #153384Graham
MemberIs 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.