Change Search Icon?

  • Author
    Posts
  • #107335
    Tark Henderson
    Power User

    We have Esotera Pro and the website is being designed for everyone including an Aging Population with poor vision and not used to Icons.

    Is there any way to either:

    • Make the Icon MORE BOLD or Change it to another Icon (like binoculars)
    • Add the word “Search” after the Icon (some think it is to magnify the page .. Opps)
    • Change the COLOR of the Icon so it stands out more.
    #107402
    Zed
    Cryout Creations mastermind

    1. The theme includes multiple looking class icons in its bundled icons set, unfortunately it does not include any binocular icons. You can see a list of available icons here:
    https://demos.cryoutcreations.eu/wp/esotera/wp-content/themes/esotera-plus/plus/resources/shortcodes/icons.php

    You can make the icon bold with CSS:
    .icon-search2::before { font-weight: 900; }

    2. You can also try adding the “Search” text next to the icon, but this text will not use the site’s configured font and may look slightly out of place:

    .icon-search2::before {
        content: "\e0a8  Search"; /* 2 spaces between the code and Search */
        margin-right: 2em;
        /* color: #color-code; */
    }

    3. The color depends on the overall configuration of the site. I have added the color customization in the CSS above, you’d need to fill in the right color code and uncomment the line to activate it.


    If you like our creations, help us share by rating them on WordPress.org.
    Please check the available documentation and search the forums before starting a topic.
    #107415
    Tark Henderson
    Power User

    Thank you very much for you excellent answers.

    I will try making it bold and also adding in the text. That should be a help.

    – – – – –

    FYI that available icons link is restricted on the Demo server (of course). But I know that the icons are also on my server so I’ll go check it out. Thanks again.

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Change Search Icon?’ is closed to new replies.