driftyco/ionicons — pull request #95 by atombender (2014-05-19 22:01:23+00:00)
Title: 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;
}
}
```