.fl-icon-button {
  @extend %default-font;
  cursor: pointer;
  display: block;
  opacity: 0.4;
  transition: opacity $highlight_visibility_transition_time;
  white-space: nowrap; // TODO: remove when removing ugly '+' from add icon
  .icon-comment {
    text-shadow: -1px -1px 1.5px white, 1px -1px 1.5px white, -1px 1px 1.5px white, 1px 1px 1.5px white;
  }
  margin:5px; //keep in sync with icon_buttons.coffee
  position:relative;
}
.comment-add-plus-overlay{
  position:absolute;
  top:1px;
  font-weight:bold;
  font-size:85%;
  left:0;
  right:0.5px;
  text-align:center;
  color:white;
  -webkit-font-smoothing: antialiased;
}

.hovered .fl-icon-button {
  opacity: 1;
}

.fl-icon-button {
  @extend %default-font;
  cursor: pointer;
  display: block;
  opacity: 0.4;
  transition: opacity $highlight_visibility_transition_time;
  white-space: nowrap; // TODO: remove when removing ugly '+' from add icon
  .icon-comment {
    text-shadow: -1px -1px 1.5px white, 1px -1px 1.5px white, -1px 1px 1.5px white, 1px 1px 1.5px white;
  }
  //we need to reserve some space around the icons so the text-shadow doesn't get cut off.
  margin:5px; //keep in sync with icon_buttons.coffee
  position:relative;
}
.comment-add-plus-overlay{
  position:absolute;
  top:1px;
  font-weight:bold;
  font-size:85%;
  left:0;
  right:0.5px;
  text-align:center;
  color:white;
  -webkit-font-smoothing: antialiased;
}

.hovered .fl-icon-button {
  opacity: 1;
}

Add comment explaining purpose of the margin.
Add comment explaining purpose of the margin.

 (for @janpaul123)
