search icon in header showing strange symbol

Hi: my search icon is not displaying properly but working. any suggestion i will appreciate with full heart.
thanks in advance
zeeshan

Hi,
You are still using genericons whereas customizer has moved to fontawesome.
Make this change in your child theme’s style.css where you have added code for the search form.

/*
    font-family: 'genericons';
    content: '\f400';
    */
    font-family: FontAwesome;
    content: '\f002';

Menaka S. thanks for reply..
This is the css Code of search form by cutomizr snipped

/* my-nav-menu-search menu item created in functions.php. Move it way over to the right */
.navbar .nav .my-nav-menu-search {
    float: right;
}
.navbar .nav {
    width: 100%;
}
.my-nav-menu-search .search-form {
    position: relative;
    margin: 0;
}
/*Stop the display of the Search button*/
.my-nav-menu-search .search-submit {
    display: none;
}
/* The "Search for" text is needed for screen readers, but we move it off screen, so we won't see it */
.my-nav-menu-search .search-form .screen-reader-text {
    position: absolute;
    left: -9999px;
    overflow: hidden;
}

/* Style the search input textbox */
.my-nav-menu-search .search-field {
    background: transparent;
    border: none;
    -webkit-box-shadow:    none;
    -moz-box-shadow:       none;
    box-shadow:            none;
    cursor: pointer;
    height: 26px;
    margin: 2px 0 2px 0;
    padding: 0 0 0 36px;
    position: relative;
    -webkit-transition: width 400ms ease;
    -moz-transition:    width 400ms ease;
    -o-transition:      width 400ms ease;
    transition:         width 400ms ease;
    width: 0px;
}

/* Expand the search box when you click it */
.my-nav-menu-search .search-field:active,
.my-nav-menu-search .search-field:focus {
    color: #5a5a5a;
    /* change the colour above if you are working with a dark navbar background */
    border: 2px solid #c3c0ab;
    cursor: text;
    outline: 0;
    width: 70px;
    -webkit-box-shadow: none;
    -moz-box-shadow:    none;
    box-shadow:         none;
    margin: 0;
}

/* Add a magnifying glass background */
.my-nav-menu-search .search-form:before {
    font-family: 'genericons';
    content: '\f400';
    position: absolute; /* this is the key to put it visually inside the search field */
    font-size: 19px;
    font-weight: normal;
    top: 5px; /* tune this vertical alignment inside the search field, as needed */
    left: 5px; /* tune this horizontal alignment inside the search field, as needed */
}

/* Reset nav width and search floating for mobile menu */
@media (max-width: 979px){
    .navbar .nav .my-nav-menu-search {
        float: left;
    }
    .navbar .nav {
        width: auto;
    }

}

Thanks where to add this code in search form

HI: Menaka S. Many thanks works perfectly after clear cache.
Now font awesome search icon appear sharp and beautifully.
You are really genius girl your help always works perfectly. you are only who solve this issue.
Thanks
zeeshan.

Glad that it worked. Can you mark this post as resolved?

yes off courses
thanks
zeeshan