• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Adding a Magnifying Glass Icon to Search Bar

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Adding a Magnifying Glass Icon to Search Bar

This topic is: not resolved

Tagged: Enterprise Pro Theme, magnifying glass icon, search bar

  • This topic has 8 replies, 3 voices, and was last updated 8 years, 4 months ago by Graham.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • April 25, 2015 at 5:32 pm #149165
    alethamcmanama
    Member

    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,
    Aletha McManama

    http://srinikahealing.com/draft/
    April 26, 2015 at 1:30 am #149173
    Brad Dalton
    Participant

    Try adding a dashicon


    Tutorials for StudioPress Themes & WooCommerce.

    April 26, 2015 at 12:21 pm #149206
    alethamcmanama
    Member

    Brad,

    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,
    Aletha

    April 26, 2015 at 12:28 pm #149212
    Brad Dalton
    Participant

    There's 2 steps

    Load the dash icons using PHP code

    Then add CSS to the class you want to use them with.


    Tutorials for StudioPress Themes & WooCommerce.

    April 26, 2015 at 1:33 pm #149213
    alethamcmanama
    Member

    Brad,

    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 #149268
    alethamcmanama
    Member

    Brad,

    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 McManama

    April 27, 2015 at 5:41 am #149269
    Brad Dalton
    Participant

    Try

    float: right;

    Tutorials for StudioPress Themes & WooCommerce.

    April 27, 2015 at 7:57 am #149292
    alethamcmanama
    Member

    Brad,

    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.
    Aletha

    May 23, 2015 at 2:56 am #153384
    Graham
    Member

    Is 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

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble