Kann mir bitte jemand sagen, wie kann ich eine Herz-Taste wie in this demo blog erstellen?Count likes Taste wie in der Demo
Und wie Likes auf Mausklick zu zählen, nicht Maus Hover?
Kann mir bitte jemand sagen, wie kann ich eine Herz-Taste wie in this demo blog erstellen?Count likes Taste wie in der Demo
Und wie Likes auf Mausklick zu zählen, nicht Maus Hover?
in Ihrem 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>
in Ihrem CSS-Datei
@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;
}
Leider funktioniert das nicht. Die Anzahl der Likes beim Mouse-Hovern wird mit jQuery (glaube ich) und die _finish_ Klasse nur dann angezeigt, wenn Sie den Mauszeiger über die Heart-Taste bewegen. Was ich wissen wollte, ist wie man Likes per Mausklick zählt. – justtme
können Sie fontawsome verwenden, die kompletten Satz von 634 Icons enthält (http://fontawesome.io/icons/)
HTML
<i class="fa fa-heart" aria-hidden="true" id="heart" onClick="like()"></i>
und Javascript für das Mausklickereignis
js
var likeCount = 10;
function like(){
likeCount++;
}
Sie sollten font-awsomes als Bilder verwenden, um Ihre Seiten zu reduzieren Größe, weil font-awsomes ist wie Schriftarten verwenden.
Sie können dies wie Schaltfläche in https://design.google.com/icons/ –
erhalten Es wird erwartet, dass Sie zumindest versuchen, dies für sich selbst zu kodieren. Stack Overflow ist kein Code-Schreibdienst. Ich würde vorschlagen, dass Sie einige [** zusätzliche Forschung **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-sected-of-stack-overflow-users) tun entweder über Google oder durch die Suche nach SO, versuchen und. Wenn Sie immer noch Probleme haben, kommen Sie zurück mit ** Ihrem Code ** und erklären Sie, was Sie versucht haben und warum es nicht funktioniert hat. –