I need help finding a solution for this question, forgive me if it seems silly. I have a button with a search symbol (iconmoon font) and I want to change the search symbol when hovering over it.
HTML:
<button class="share search-btn"><span class="icon-icn_search"></span></button>
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot');
src: url('fonts/icomoon.eot') format('embedded-opentype'),
url('fonts/icomoon.ttf?m23m4l') format('truetype'),
url('fonts/icomoon.woff?m23m4l') format('woff'),
url('fonts/icomoon.svg?m23m4l#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.mls {
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
color: #ffffff;
font-size: 28px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-icn_search:before {
content: "\e934";
}
.icon-icn_question_small_hover:before {
content: "\e932";
}
.search-btn {
background-color: #6670a7;
padding: 15px 10px 15px 10px;
}
.search-btn:hover{
background-color: #434f93;
}
.search-btn:hover:before{
content: "/e932";
}
Thank you!