title: Is it possible to use Icons with css:before without hardcoding the code?
body: <p>I am using the method answered <a href="https://stackoverflow.com/questions/11875088/use-fontawesome-or-glyphicons-with-css-before/11919684#11919684">here on StackOverflow</a> to use custom police definition with other classes. This method is summarized below:</p>
  
  <pre><code>[class^="icon-"]:before,
  [class*=" icon-"]:before {
      font-family: FontAwesome;
  }
  .icon-custom:before {
      content: "\f0c4";
  }
  </code></pre>
  
  <p>When I'm using a custom class to use it, I have to use the code generated by the library:</p>
  
  <pre><code>i:after { 
      content: '\f0c4';
  }
  </code></pre>
  
  <p>In case this code <code>f0c4</code> change in the library, I would like to avoid reporting the change in every custom class one by one. I decided to use Sass or Less to be able to deal with this problem.
  It would be like below but it does not work.</p>
  
  <pre><code>i:after {
     .icon-custom
  }
  </code></pre>
  
  <p>With Sass or Less, is it possible to avoid this magic number?</p>
  
  <p>I know this will be possible:</p>
  
  <pre><code>i:after {
     content: @custom-code-value
  }
  </code></pre>
  
  <p>But I prefer to avoid changing the <code>@custom-code-value: : "\f0c4";</code>
  Is it the only solution?</p>