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
applyAuthorStyles is deprecated. Thus you have to include stylesheets within
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.
Answered By – Robert
Answer Checked By – Katrina (FlutterFixes Volunteer)