Fix font-awesome icons in Internet Explorer 11

We're using `@extend` with a placeholder selector to generate the code
related to the icons. That means the generated CSS code will look
similar to:

```
.something,
.something-else,
.in-favor-against button:not(:hover, :active),
.etcetera,
.more-etcetera {
 /* Rules here */
}
```

That means that, if one selector isn't supported by the browser, none of
the specified selectors will apply these rules.

The `:not(:hover, :active)` selector, introduced in commit 3482e6e05, is
currently supported by 96%-98% of the browsers. Browsers like Internet
Explorer don't support it.

Since there's a simple solution for this issue which results in a big
gain for 2%-4% of the population, we're fixing the issue by avoiding the
non-universally supported selector.

app/assets/stylesheets/in_favor_against.scss

@@ -50,15 +50,20 @@
       cursor: pointer;
 
       &[aria-pressed=false]:hover,
-      &[aria-pressed=false]:active,
-      &[aria-pressed=true]:not(:hover, :active) {
+      &[aria-pressed=false]:active {
         @include has-fa-icon($icon, solid);
       }
 
       &[aria-pressed=true] {
+        @include has-fa-icon($icon, solid);
         background: $pressed-color;
         border-color: $pressed-color;
         color: #fff;
+
+        &:hover,
+        &:active {
+          @include has-fa-icon($icon, regular);
+        }
       }
     }
   }