font awesome icons in polymer components

1,612 views
Skip to first unread message

phyton.dbd

unread,
Jun 5, 2014, 1:40:42 PM6/5/14
to w...@dartlang.org
Back in the day, to get Font Awesome working I had to use a workaround in which applyAuthorStyles was overriden in the component as true.

Specifically, prior to polymer 0.10, to get icons to show up, I would:
1) Include the fontawesome stylesheet in the top level <head></head>, not in the components.
2) Annotate my label: <label><span class="fa fa-usd fa-fw" style="width:1.5em"></span> Amount</label>


Now that applyAuthorStyles is no longer used, what is the recommended way to get the fonts to show up?

For example, in this code the icons no longer show up. I had other issues related to styling which were overcome by adding /deep/ to the css selectors. But I'm not sure if that is something that can be done here or the issue is different.

Thanks,
Dan

Don Olmstead

unread,
Jun 5, 2014, 2:17:45 PM6/5/14
to w...@dartlang.org
In Pixelate's Flat UI theme we just use SASS and include the font awesome bits in there https://github.com/donny-dont/Pixelate-Flat/blob/master/lib/stylesheets/fonts/_variables.scss


--
You received this message because you are subscribed to the Google Groups "Dart Web Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web+uns...@dartlang.org.
Visit this group at http://groups.google.com/a/dartlang.org/group/web/.
To view this discussion on the web visit https://groups.google.com/a/dartlang.org/d/msgid/web/fdc39058-188d-4ebc-acc4-e31ea1e1ab29%40dartlang.org.

Geoff Adams

unread,
Jun 5, 2014, 9:59:08 PM6/5/14
to w...@dartlang.org
Since Chrome 35's native Shadow DOM implementation, I've found that I need to include the stylesheet both in the main HTML file (index.html) and @import it in the components that need it. If I don't do the latter, then they don't get the style. If I don't do the former, then the font itself isn't loaded, and I see just boxes instead of the icons.

Perhaps if I did <link rel="stylesheet" href="font-awesome.min.css"> in the components, then I wouldn't need it in index.html, as well, but then my understanding is that the stylesheet would be duplicated for each component in the compiled app.

- Geoff


To view this discussion on the web visit https://groups.google.com/a/dartlang.org/d/msgid/web/CAJvbVc5wuL_A-dkhGks1nPdbAmqukm5tiOUv76WVbvPP45nirQ%40mail.gmail.com.

Günter Zöchbauer

unread,
Jun 6, 2014, 1:57:38 AM6/6/14
to w...@dartlang.org
Don's solution looks nice. I yet have to learn SASS. The next important topic on my TODO list.

Otherwise you can add the style to your component or change the CSS by adding 

* /deep/ 

in front of each selector.

erik.grimes

unread,
Jun 6, 2014, 3:06:04 PM6/6/14
to w...@dartlang.org
I run bootstrap, flat-ui, and fontawesome through the transform below based on John's suggestions in an earlier thread. 


import 'package:csslib/parser.dart';

import 'package:csslib/visitor.dart';

String transform(String src){

 var printer = new ShadowDOMTransformPrinter();


   printer.visitTree(parse(src), pretty: true);


  return printer.toString();


}

class ShadowDOMTransformPrinter extends CssPrinter {

 void visitSelector(Selector selector){

   emit(' * /deep/ ');

   super.visitSelector(selector);

 }

}



I import css for native and polymfill shadowom in my main html document.


<!-- styles for polyfill shadowdom -->

<link rel='stylesheet' href='asset/flat_ui/bootstrap/css/bootstrap.css'>

<link rel='stylesheet' href='asset/font_awesome/css/font-awesome.css'>

<link rel='stylesheet' href='asset/flat_ui/css/flat-ui.css'>

<!-- styles for native shadowdom -->

<link rel='stylesheet' href='asset/flat_ui/bootstrap/css/bootstrap-shadowdom.css'>

<link rel='stylesheet' href='asset/font_awesome/css/font-awesome-shadowdom.css'>

<link rel='stylesheet' href='asset/flat_ui/css/flat-ui-shadowdom.css'>


 I haven't tested all of the css, but for my applications this works well.  I'm not a css expert by any stretch of the imagination, but I wonder if such a general purpose transform would work for most shadowdom unaware css frameworks like bootstrap? 

Hope this helps.

Erik

phyton.dbd

unread,
Jun 11, 2014, 4:51:51 PM6/11/14
to w...@dartlang.org
Erik, is this example solution out on github or pub so I could reference it?

I get that with polymer 0.10 a new transformer was suggested and under circumstances you need to use /deep/ to style elements when penetrating shadowdom boundaries. I gather this is what you are doing here with the custom transformer. But before I go to the end-game of automating a general solution with a transformer, which I'll need to read up on, I would first just like to see a font-awesome icon show up again.

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>

By applying those font-awesome classes (class="fa fa-calendar fa-fw") the cute icons showed up pre-polymer 0.10.0. Gunter mentioned that Don's solution looks nice, and I agree. But I am not well-versed in css, let alone scss. What I see from Don's solution is a powerful way to generate .css files where the starting point is .scss. In Pixelate-flat/lib/stylesheets/fonts/_variables.scss I see the definition of the fa variables, but I do not see how the font-awesome icons are used in either Pixelate-flat or Pixelate (I'm sure it is there I just don't see it).

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? I guess I'm still confused how this is related to /deep/ and how to address it. I also tried Geoff's suggestion of including the <link> in the component, in addition to the main html, but had no luck.

Thanks
Dan 

phyton.dbd

unread,
Jun 16, 2014, 3:03:37 PM6/16/14
to w...@dartlang.org
Sorry to be so persistent... but I have font-awesome icons that previously (before polymer 0.10.0) worked and now there are no icons and therefore I have no way to invoke my handlers. I've tried to understand the various solutions suggested but had no luck (as described below). 

Can anyone point to a pub package or github package that has font-awesome icons working in a component when specifying a span item using the font-awesome classes in the template html?

A github dart package that I would like to make work is here.

Thanks
Dan

erik.grimes

unread,
Jun 17, 2014, 1:29:17 PM6/17/14
to w...@dartlang.org
Hey Dan,

  I've created a git repo @ https://github.com/nameitlater/shadowdom-teacher with the code I've used for bootstrap (3.0.0), flat-ui (~2.1.2), and font-awesome (4.0.3)

Erik

erik.grimes

unread,
Jun 17, 2014, 1:45:54 PM6/17/14
to w...@dartlang.org
I also threw up a pub package.  

phyton.dbd

unread,
Jun 17, 2014, 4:05:55 PM6/17/14
to w...@dartlang.org
Thanks, I'll check it out. I re-asked the question on SO and got one of the workarounds to work. The workaround was to include the font awesome css once in the top-level file and in each component using it. It did not really require /deep/. My first attempts at this workaround were messed up because I was putting the link statement in the component html file outside of the template element. Moving it into the template element did the trick. I've got a lot of learning to do for web dev. Were it not for Dart I may have moved on to something else entirely :-)


On Tuesday, June 17, 2014 12:29:17 PM UTC-5, erik.grimes wrote:

luis.ant...@gmail.com

unread,
Feb 23, 2016, 1:44:06 PM2/23/16
to Dart Web Development
There is an element for that ;)

use this https://www.npmjs.com/package/fontawesome-iconset:
  1. get the icons you need from fa-icons.html
  2. put it in a new iron-iconset-svg
  3. import iron-iconset-svg and iron-icon
  4. use it like other iron-icon
You can view how to use there https://developers.google.com/web/shows/polycasts/season-2/Iron-Iconsets.
Reply all
Reply to author
Forward
0 new messages