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);
  });