Question

有人可以告诉我如何在this demo blog中创建心形按钮？

如何计算鼠标点击的喜欢，而不是鼠标悬停？

Answer 1

在您的HTML中

<div class="tbp-hrt-container">
    <div class="tbp-hrt finish" href="http://uno.thebasicpage.com/2016/01/home-office.html" data-id="1"></div> 71
</div>

在CSS文件中

@import http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css;


.tbp-hrt-container {
    width: auto;
    margin: 0;
    display: inline-block;
    height: 21px;
    line-height: 21px;
}

.tbp-hrt {
    position: relative;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    font-size: 13px!important;
}

.tbp-hrt.finish:before {
    color: #e65a47;
    content: "\f004";
    font-weight: 400!important;
    font-family: fontawesome;
}

.tbp-hrt.finish:after {
    color: #000;
    font-weight: 400!important;
}
.tbp-hrt:after {
    content: attr(data-amount) "";
    font: normal normal 11px Martel Sans, sans-serif;
    color: #000000;
    background: transparent;
    border-radius: 0;
    display: inline-block;
    margin: 0 0 0 10px;
    padding: 0 10px;
}

Answer 2

您可以使用fontawsome，其中包含完整的634个图标集（http://fontawesome.io/icons/）

HTML

<i class="fa fa-heart" aria-hidden="true" id="heart" onClick="like()"></i>

并使用javascript进行鼠标点击事件

JS

var likeCount = 10;

function like(){
    likeCount++;
}

你应该使用font-awsomes而不是图像来减少你的网站大小，因为font-awsomes就像字体一样。

伯爵喜欢在演示中的按钮

2 个答案: