sass - Is it possible to use Icons with css:before without hardcoding the code? -

i using method answered here on stackoverflow use custom police definition other classes. method summarized below:

[class^="icon-"]:before, [class*=" icon-"]:before {     font-family: fontawesome; } .icon-custom:before {     content: "\f0c4"; } 

when i'm using custom class use it, have use code generated library:

i:after {      content: '\f0c4'; } 

in case code f0c4 change in library, avoid reporting change in every custom class 1 one. decided use sass or less able deal problem. below not work.

i:after {    .icon-custom } 

with sass or less, possible avoid magic number?

i know possible:

i:after {    content: @custom-code-value } 

but prefer avoid changing @custom-code-value: : "\f0c4"; solution?

you can try group content value in map variable

i adapted example

scss

// map variable $icons: (   facebook   : "\f0c4",   twitter    : "\f0c5",   googleplus : "\f0c6",   youtube    : "\f0c7" );  // mixin doing magic @mixin icons-list($map) {   @each $icon-name, $icon in $map {     @if not map-has-key($map, $icon-name) {       @warn "'#{$icon-name}' not valid icon name";     }      @else {       &--#{$icon-name}::before {         content: $icon;       }     }    } }  // how use .social-link {     background-color: grey;     @include icons-list($icons); } 

css

// css output .social-link {   background-color: grey; } .social-link--facebook::before {   content: ""; } .social-link--twitter::before {   content: ""; } .social-link--googleplus::before {   content: ""; } .social-link--youtube::before {   content: ""; } 

---

so have maintain $icons variable in case values change. hope idea.