font-awesome in <span> for polymer ">0.10.0"

Question

Now that applyAuthorStyles is deprecated the font-awesome icons no longer show up. This question how to incorporate font awesome in a dart component? has some useful information but I'm unable to get the untested suggestions to work.

Here is a template from a very simple mortgage calculator component project:

<polymer-element name="plus-payment-schedule">
  <template>
    <style>
    </style>
      <fieldset>
        <legend>Payment Schedule</legend>
        <label><span class="fa fa-calendar fa-fw" style="width:1.5em"></span> Start Date</label>
        <plus-date-input id="date"></plus-date-input>
        <div class="payment-schedule">
          <table id="schedule_table">
          </table>
        </div>
      </fieldset>
  </template>
  <script type="application/dart" src="payment_schedule.dart"></script>
</polymer-element>

Prior to polymer 0.10.0, using the suggested applyAuthorStyles patch this code worked. Meaning, by applying those font-awesome classes (class="fa fa-calendar fa-fw") the font-awesome icons showed up. I've removed applyAuthorStyles and made other polymer init changes required for the update. The component works fine except the font-awesome icons no longer show up.

When I run this mortgage calculator app and look in the inspector, I see that those classes are applied to the span. So I guess the issue is the definition of the classes (fa fa-calendar fa-fw) is not available?

Any information on how to make this specific scenario work?

The component is hosted here

Answer 1

applyAuthorStyles is deprecated. Thus you have to include stylesheets within <template>.

The problem is that @font-face does not work inside polymer elements at the moment. The solution is to include @font-face in the regular document and to add the classes to your polymer or include font-awesome.css in both places.

This should solve it.

See also: - https://code.google.com/p/dart/issues/detail?id=18581 - https://github.com/Polymer/docs/issues/434

Regards, Robert