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


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">
        <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">
  <script type="application/dart" src="payment_schedule.dart"></script>

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


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:

Regards, Robert

Answered By – Robert

Answer Checked By – Katrina (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *