Issue
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
Solution
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
Answered By – Robert
Answer Checked By – Katrina (FlutterFixes Volunteer)