css - 在悬停时切换一种字体很棒，没有javascript

Question

我的 HTML:

<a href="#" class="button"><span><i class="fa fa-check"></i></span>Proceed to checkout</a><br>

我的 CSS:

body {
    text-align: center;
    padding: 40px;
    background: #F5F5F5;
}
.container {
    width: 300px;
    text-align: center;
    margin: auto;
}
.button {
    font-size: 14px;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding-right: 10px;
    padding-left: 50px;
    position: relative;
    background-color: rgb(111, 111, 111);
    color:rgb(255, 255, 255);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    text-shadow:0px 1px 0px rgba(0, 0, 0, 0.5);
    -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";
    zoom:1;
    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#ff123852, Positive=true);
    -moz-box-shadow:0px 2px 2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow:0px 2px 2px rgba(0, 0, 0, 0.2);
    box-shadow:0px 2px 2px rgba(0, 0, 0, 0.2);
    -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";
    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=2, Color=#33000000, Positive=true);
}

.button span {
    background-color: #730000;
}

.button span {
    position: absolute;
    left: 0;
    width: 40px;
 /*   background-color:rgba(0, 0, 0, 0.5); */
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-right: 1px solid rgba(0, 0, 0, 0.15);
}
.button:hover span, .button.active span {
    background-color:rgb(0, 102, 26);
    border-right: 1px solid rgba(0, 0, 0, 0.3);
}
.button:active {
    margin-top: 2px;
    margin-bottom: 13px;
    -moz-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.5);
    -webkit-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.5);
    box-shadow:0px 1px 0px rgba(255, 255, 255, 0.5);
    -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ccffffff,Positive=true)";
    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#ccffffff, Positive=true);
}

fiddle :http://jsfiddle.net/8ef8ph5x/8/

我试图在悬停按钮的任何区域时将复选标记更改为玻璃 (fa-glass) 图标。 如何使用纯 CSS 而不是 javascript 来实现这一点？

Answer 1

您可以在 CSS 中设置 content 属性来替换图标:

.button .fa.fa-check:before {
    font-family: FontAwesome;
    content: '\f00c'; /* check */
}

.button:hover .fa.fa-check:before {
    content: '\f000'; /* glass */
}

fiddle :http://jsfiddle.net/9jdzvu8n/2/

您可以在 FontAwesome 网站的图标详细信息页面上找到图标的 unicode 值(例如，f00c)。