Javascript 点击字体真棒图标后如何填充字体真棒？

我有一个字体很棒的图标，但当我点击图标时，他必须被填充，但他只是轮廓

Html

---

以下是JSFIDLE

如果要填充心脏图标，需要交换类删除fa-heart-o并添加fa-heart：

var=0； 函数btnClick{ 时间点++； 如果单击时间===1{ var elem=document.querySelector'i'； 元素类列表。删除'fa-heart-o'； 元素。类列表。添加“fa-heart”； } document.getElementById'timesClicked'。innerHTML=timesClicked； 返回真值 } 0

---

你的提琴不起作用，你需要在这里把JS包起来，因为你在HTML部分使用函数名——那么这里的实际问题是什么？如果你想有一颗饱满的心，那你就得换掉上课的时间……小提琴在我的电脑上工作。我的问题是：如何更改字体“真棒心”上的颜色？点击后？@Mohammad your code works thanx！

<center><span id="timesClicked">0</span></center>

<i class="fa fa-heart-o btn btn-default" onclick="javascript:btnClick()"></i>

var timesClicked = 0;

function btnClick() {
timesClicked++;

document.getElementById('timesClicked').innerHTML = timesClicked;
return true
}