Use has-fa-icon in agree/disagree buttons

This way we can simplify the code in the views a little bit.

app/assets/stylesheets/in_favor_against.scss

@@ -7,8 +7,7 @@
     display: inline-block;
   }
 
-  .icon-like,
-  .icon-unlike {
+  button {
     background: #fff;
     border: 2px solid;
     border-radius: rem-calc(3);
@@ -16,7 +15,7 @@
     display: inline-block;
     font-size: rem-calc(30);
     line-height: rem-calc(30);
-    padding: rem-calc(3) rem-calc(6);
+    padding: rem-calc(3) rem-calc(6) rem-calc(6);
     position: relative;
 
     &:hover,
@@ -27,7 +26,8 @@
     }
   }
 
-  .icon-like {
+  .in-favor button {
+    @include has-fa-icon(thumbs-up, solid);
 
     &:hover,
     &:active {
@@ -36,7 +36,8 @@
     }
   }
 
-  .icon-unlike {
+  .against button {
+    @include has-fa-icon(thumbs-down, solid);
 
     &:hover,
     &:active {
@@ -67,30 +68,22 @@
   }
 
   .voted {
-
-    .icon-like,
-    .icon-unlike {
     color: #fff;
   }
 
-    .icon-like {
+  .in-favor .voted {
     background: $like;
     border: 2px solid $like;
   }
 
-    .icon-unlike {
+  .against .voted {
     background: $unlike;
     border: 2px solid $unlike;
   }
-  }
 
   .no-voted {
-
-    .icon-like,
-    .icon-unlike {
     opacity: 0.3;
   }
-  }
 
   .against {
     margin-left: $line-height / 4;

app/components/shared/in_favor_against_component.html.erb

@@ -7,9 +7,7 @@
         method: "post",
         remote: true,
         disabled: !current_user do %>
-      <span class="icon-like">
       <span class="show-for-sr"><%= t("votes.agree") %></span>
-      </span>
     <% end %>
     <span class="percentage"><%= votes_percentage("likes", votable) %></span>
   </div>
@@ -24,9 +22,7 @@
         method: "post",
         remote: true,
         disabled: !current_user do %>
-      <span class="icon-unlike">
       <span class="show-for-sr"><%= t("votes.disagree") %></span>
-      </span>
     <% end %>
     <span class="percentage"><%= votes_percentage("dislikes", votable) %></span>
   </div>