FortAwesome / font-awesome-sass

Font-Awesome Sass gem for use in Ruby/Rails projects
MIT License
913 stars 265 forks source link

Using Sass maps for storing settings #69

Open antonlvovych opened 9 years ago

antonlvovych commented 9 years ago

Hi there! What do you think about using Sass maps for storing FA settings?

Sass map object will be looking something like this:

$fa-settings: (
  font-name: "fontawesome-webfont",
  css-prefix: "fa",
  icons-map: (
    adjust: "\f042",
    adn: "\f170"
  )
) !default; 

and with the map we can generate styles for each icon in a few lines of code:

@each $icon-name, $icon-code in map-get($fa-settings, icons-map) {
  .#{map-get($fa-settings, css-prefix)}-#{$icon-name}::before {
    content: $icon-code;
  }
}

It's awesome, isn't it? :sunglasses:

ksubileau commented 9 years ago

:+1:

I need to @extend all the default fa-* icons classes in order to add the icon on a child element instead of the element itself. This is what I'm doing currently:

$fa-icons: glass music search envelope-o heart //[...]
@each $name in $fa-icons {
    // Apply icon on the child link instead of on the li element
    li.nav-ic-#{$name} > a {
        @extend .#{$fa-css-prefix}-#{$name}
    }
}

I had to manually define the icons list ($fa-icons) to be able to use a loop. It would be better if this list was defined directly inside Font Awesome !