点赞点赞按钮点赞

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就像字体一样。