1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.5 search magnifying glass

Discussion in 'Styling and Customization Questions' started by swatme, Mar 11, 2016.

  1. swatme

    swatme Well-Known Member


    May i know where can i modify the magnifying glass button for search?
    I want to add few text beside it the magnifying glass and also change the graphics if possible.

    tmp_20474-2016-03-11 18.03.15-1165775382.png

  2. rafass

    rafass Well-Known Member

    I always do all those changes with EXTRA.css.
    ie, if you want to add some image, you can use something like:
    #QuickSearchPlaceholder {
    background: rgba(0, 0, 0, 0) url('route-of-your-image/emoji.png') no-repeat center!important;
    background-size: contain!important;
    And this is the result:
    Screen Shot 2016-03-11 at 2.34.20 PM.png

    you also can do the same using FA icons. with something like:
    #QuickSearchPlaceholder {
        text-indent: 0!important;
        background: none!important;
    #QuickSearchPlaceholder:before {
        font-size: 14px;
        color: #b23026;
        content: "\f00e";
        font-family: FontAwesome;
    This is the result:
    Screen Shot 2016-03-11 at 2.35.37 PM.png
    you can also play with the css properties :after :before to reach the result that you're looking for.

Share This Page