Entropy Icon set with Jquery appears as value

Question

I am creating a search bar with Jquery, I am creating the submit button like this:

var search_button = $("<input />", {
                            type: "submit",
                            name: "search_button",
                            value: "&#128269;",
                            class: "search_button"
                        });

For the button I am using the Entypo Search Icon, hence the "🔍". I have included the font type in CSS, and set it in the class, but in the html it appears as "🔍" and not the magnifying glass icon. How come the raw text is appearing and not the icon?

CSS:

.search_button {
    cursor: pointer;
    display: inline-block;
    border: 0px;
    background-color: lightgrey;
    font-family: 'EntypoRegular';
    color:darkgrey;
    font-size: 35px;
    line-height: 1px;
    padding: 0px;        
    height: 20px;
    width: 150px;
    margin: 7px 0px;
    left: 15.4%;
}

Answer 1

It might be the way you're inserting this with jQuery. It might be a jQuery issue. Try this instead:

var search_button = $('<input'
    + ' type="submit"'
    + ' value="&#128269;"'
    + ' class="search_button"'
    + ' name="search_button"'
  +' />').appendTo('body');