How to change symbol(character) of iconmoon font by CSS?


Tags: html,css

Problem :

I can't find solution for this question, sorry if it is too stupid. For example I have button with search symbol(iconmoon font) and I need change search symbol on another by hover.

HTML: <button class="share search-btn"><span class="icon-icn_search"></span></button> CSS:

@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!



Solution :

Maybe this should do the trick for you:

Remove this:

.search-btn:hover:before{
  content: "\e932";
}

Add this:

.search-btn:hover .icon-icn_search:before{
   content: "\e932";
}

    CSS Howto..

    CSS: how to enforce word wrap on an odd situation?

    How to give an element with an id a certain CSS property if it has a class?

    How to know when you have received an image in the browser?

    How to click and swap a text in a button?

    How to change the color of each instance of a word in an html table with css?

    How to showing expanding text with javascript and css

    How to create a pattern overlay on top of an image

    How do I get Jquery to toggle display

    Bottom border doesn't show up in Firefox

    How to apply css selector in ZK

    How can I specify a *.css file in an ASP.NET UserControl?

    css: how to inherit whole class

    How to create a box when mouse over text in pure CSS?

    how to load all css and js at a time in Cakephp

    How to integrate Thread and

    AngularDart - How to style Component with global CSS in Google Chrome 35m (applyAuthorStyles is deprecated)

    How to achieve this header with html and css?

    How to center a border-width shape properly, relative to its parent input button?

    How to position two
  • 's within a nested
      ?
  • How to get Google menu buttons like styling using CSS

    How do I center my responsive form and align it evenly with everything else?

    how to select one element in jQuery

    how to create table grid view fix header with long title name using only CSS?

    How to input block of text next to Font Awesome icon in CSS?

    How to break up long words but leave out short ones?

    how to highlight currently opened page link in css

    What is cufon and canvas and how to overwrite them

    jQuery + CSS: How to scroll smooth, regarding a fixed header?

    How to let the users style a web component with their own CSS?

    jquery how to add image from computer