In SCSS files, use @at-root for things that must be root-level declarations

In order to nest Ionicons inside a selector, one can do:

```scss
.foo {
  @import "ionicons/ionicons";
}
```

This ensures that everything is "namespaced" by the selector `.foo` so that Ionicons doesn't leak outside it. However, this breaks SASS (discussed in [this SASS issue](https://github.com/nex3/sass/issues/1251)) because Ionicons declares a `@font-face`, which cannot be nested inside a selector and must be at the root level. The same goes for the keyframe stuff, incidentally.

The fix is to change `_ionicons-font.scss` to use the SASS `@at-root` directive, like so:

```scss
@at-root {
  @font-face {
   font-family: $ionicons-font-family;
   src:url("#{$ionicons-font-path}/ionicons.eot?v=#{$ionicons-version}");
   src:url("#{$ionicons-font-path}/ionicons.eot?v=#{$ionicons-version}#iefix") format("embedded-opentype"),
    url("#{$ionicons-font-path}/ionicons.ttf?v=#{$ionicons-version}") format("truetype"),
    url("#{$ionicons-font-path}/ionicons.woff?v=#{$ionicons-version}") format("woff"),
    url("#{$ionicons-font-path}/ionicons.svg?v=#{$ionicons-version}#Ionicons") format("svg");
   font-weight: normal;
   font-style: normal;
  }
}
```