[Resolved] Search icon next to button text

Home Forums Support [Resolved] Search icon next to button text

Home Forums Support Search icon next to button text

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1580392
    chris

    Hi i cant seem to find a search icon in the selection give, is there a way to add one myself? i wish for the search button i made to have a magnifying glass next to the text “refine search” and im not sure how id do a custom one.


    Adding an third icon to the topbar has caused the navigation there to not display correctly on mobile, any change padding could fix that or something?

    Also have a slight padding issue on mobile “local businesses” page where i can scroll side to side.

    Thank you.

    #1580726
    David
    Staff
    Customer Support

    Hi there,

    theres the Navigation Search option in Customizer > Layout > Primary Navigation.
    If thats not right for you let us know where you want it.

    The sideways scroll is coming from Search Filter form, you can add this CSS to eliminate that issue:

    .gb-container .lsd-row,
    .gb-container .lsd-form-row {
        margin-left: unset;
        margin-right: unset;
    }
    #1581672
    chris

    Hi David,

    Added the css and it fixed issue on mobile thanks. Home page is doing it too but not on mobile, only on desktop which is odd.

    I didn’t mean add the search bar, i wont add that unless it’s possible to change search results page to listdom results, and i dont think that’s possible.

    What i mean is the refine search button on the home page with three dots being used as an icon, i wish to replace the dots with a magnifying glass like the search bar would show. I also with to add an icon infront of navigation menu text, is that possible? eg nav bar:

    “Search icon” “Local businesses”
    “Custom icon” “Advertise”

    Hope you understan, thank you.

    #1582161
    David
    Staff
    Customer Support

    So the Refine Search is a GB Button which you can add your own SVG Icon HTML to the buttons Icon settings – here for example is the SVG code for the GP Nav search icon:

    <svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em"><path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"></path></svg>

    #1582257
    chris

    Perfect that got the job done for the button thank you, i really need to know if its possible or not to add these SVG icons before each item on the menu?

    Where would i put the code to do this and also where do i find more icons such as the search icon code you gave me? is there a site for it? Many thanks.

    #1582381
    Elvin
    Staff
    Customer Support

    Perfect that got the job done for the button thank you, i really need to know if its possible or not to add these SVG icons before each item on the menu?

    There are multiple ways of doing this.

    One way of doing this is to add the <svg> on the menu item’s label within the Appearance > Menus
    https://docs.generatepress.com/article/adding-icons-to-menu-items/

    Instead of using the <i> tags, we replace it with <svg> + menu text and set their alignment to display:flex; flex-direction: row; so both the icon and the text within the menu items is within 1 row.

    The other way of doing this is the use of CSS pseudo element ::before. But to do this, you’ll have to upload the svg files to your media library and use content: url('/path/to/file.svg'); property for your CSS pseudo element.

    Example: “CSS adding an svg before all he menu item links.”

    .main-nav ul li a::before{
        content: url('/path/to/file.svg');
        display:block;
        height: 100px;
        width: auto;
    }

    Note: This way is applicable to all elements, not just nav menu item links. This may be the most fitting for what you’re trying to achieve as it is pretty versatile.

    One more way of doing this is to add the icons through a filter using wp_nav_menu_items but this is more complicated.

    A wise man once said:
    "Have you cleared your cache?"

    #1584143
    chris

    Thank you!

    #1585082
    Elvin
    Staff
    Customer Support

    Thank you!

    No problem. 😀

    A wise man once said:
    "Have you cleared your cache?"

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.