script.js
var icons = ["twitter-square", "facebook-square", "linkedin-square", "youtube-square", "github-square", "google-plus-square"];
function iconClicked(icon){
console.log(icon + " clicked");
}
var defaultStyle = {
padding: "0px 5px 0px 5px",
margin: "5px",
"border-radius": "16px",
"background-color": "white",
"stroke": "none",
"cursor": "pointer"
};
var hoveredStyle = { "background-color": "lightgray" };
var clickedStyle = { "background-color": "gray" };
d3.select("body").selectAll("i").data(icons)
.enter().append("i")
.attr("class", function(d){
return "icon fa fa-5x fa-" + d;
})
.style(defaultStyle)
.on("mouseover", function(){
d3.select(this).style(hoveredStyle);
})
.on("mouseout", function(){
d3.select(this).style(defaultStyle);
})
.on("mousedown", function(d){
d3.select(this).style(clickedStyle);
iconClicked(d);
})
.on("mouseup", function(){
d3.select(this).style(hoveredStyle);
});