Question

我找不到这个问题的解决方案，抱歉，如果它太愚蠢了。例如，我有带搜索符号的按钮（iconmoon字体），我需要通过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";
}

谢谢！

Answer 1

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

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

Answer 2

也许这应该适合你：

删除它：

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

添加：

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

如何用CSS更改iconmoon字体的符号（字符）？

2 个答案: