how to incorporate font awesome in a dart component?

StackOverflow https://stackoverflow.com//questions/20026280

  •  21-12-2019
  •  | 
  •  

Question

The following html displays a nice camera icon to the left of the text. When trying to style polymer components, how is this achieved?

<!doctype html>
<html>
<head>
   <link rel="stylesheet" id="font-awesome-4-css" href="http://astronautweb.co/wp-content/themes/astro2012/css/font-awesome-4.0.3.css?ver=4.0.3" type="text/css" media="all">
</head>
<body>
  <p><i class="fa fa-camera-retro fa-lg"></i> Cool camera</p>
</body>

Specifically, where should the link be included, what should applyauthorstyles be set to, what should style within the template be.

Was it helpful?

Solution

EDIT

applyAuthorStyles is deprecated or already removed.

I haven't tried it myself yet, but it should work if the font-awesome styles are added to the component. This is cumbersome because the styles need to be added to each component where FA is used.

Pixelate uses SASS with these variables: https://github.com/donny-dont/Pixelate-Flat/blob/master/lib/stylesheets/fonts/_variables.scss I haven't used SASS yet so I can't provide more details.

Another solution is to add * /deep/ in front of each selector.

You can use this code to build a script that does this:

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);
  }
}

This modified CSS doesn't work outside the shadowDOM therefor the modified and unmodified styles are needed (each selector once with and once without /deep/

See also this discussion and this one

-------

if you have the stylesheet reference at the page you need bool get applyAuthorStyles => true; in your custom element.

Referencing the stylesheet in the custom element had a bug as stated above. The bug is fixed but the Dart version containing the fix is not yet released.

In the meantime you can copy the contents of the stylesheet in a style tag inside the custom element <template>. In this case you won't need applyAuthorStyles.

OTHER TIPS

Edit: Workaround for CSS variables:

The font awesome CSS file includes an @font-face definition which does not currently work in the shadowDOM, at least in Chrome (ref1, ref2). One way around this is to move the @font-face definition out of the fa CSS file and place it as a global style tag. For example:

<html>
  <head>
    <style>
      @font-face {
        font-family: 'FontAwesome';
        src: url('font-awesome-4.0.3/fonts/fontawesome-webfont.eot?v=4.0.3');
        src: url('font-awesome-4.0.3/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('font-awesome-4.0.3/fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('font-awesome-4.0.3/fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('font-awesome-4.0.3/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
        font-weight: normal;
        font-style: normal;
      }
    </style>
    <script type='application/dart'>export 'package:polymer/init.dart';</script>
    <script type="text/javascript" src="packages/browser/dart.js"></script>

You can then reference a local copy of the edited fa CSS file internal to your custom polymer element with no need to use applyAuthorStyles like this:

<polymer-element name="dropdown-menu-element">
  <template>
    <link rel="stylesheet" href="../font-awesome-4.0.3/css/font-awesome.css">

Make sure you have downloaded the entire fa directory to your project. The fa icons can now be used in your polymer element.

Original Answer using applyAuthorStyles:

I just include the path to font awesome in the head section of the index.html file:

<head>
    <title>Working with Polymer</title>
    <link rel="stylesheet" href="css/font-awesome-4.0.0/css/font-awesome.min.css">
    <link rel="import" href="elements/navbar_element.html">
    <script type='application/dart'> export 'package:polymer/init.dart'; </script>
    <script type="text/javascript" src="packages/browser/dart.js"></script>
</head>

Then in my navbar_element.html file, I just reference the icons the way you normally would:

<polymer-element name="navbar-element">
  <template>
    <style>
      /* other styles here */
      }
    </style>
    <div>
      <div class="st-container">
        <nav class="st-nav">
          <template repeat="{{item in menu}}" >
            <a id={{item.id}} href="#" class={{item.arrowClass}} on-click="{{menuHandler}}">
              <span class="menuName">{{item.text}}&nbsp;</span>
              <i class={{item.icon}}></i>
            </a>
          </template>
          <div class="arrow_box"></div>
        </nav>
      </div>
    </div>
  </template>
  <script type="application/dart" src="navbar_element.dart"></script>
</polymer-element>

In this case, I am referencing the specific font awesome icon, <i class={{item.icon}}></i>, in my navbar_element.dart file using an observable list like so:

final ObservableList<Item> menu =
      toObservable([
                    new Item('Fourier', 'fourier', 'fa fa fa-sort-amount-desc fa-rotate-270', false),
                    new Item('Sequences', 'sequence', 'fa fa-tasks', false),
                    new Item('Convolution', 'convolution', 'fa fa-asterisk', true),
                    new Item('Deconvolution', 'deconvolution', 'fa fa-headphones fa-rotate-90', false),
                    new Item('Filters', 'filter', 'fa fa-filter', false)
                    ]);

where the icon field is just a field in the Item class and I've set bool get applyAuthorStyles => true;.

It seems this package is doing exactly this http://pub.dartlang.org/packages/fontawesome_elements

I published the package bwu_fontawesome_iconset_svg that makes FontAwesome icons compatible with core-elements and paper-elements

There is a guide on styling polymer elements here which may be helpful:

http://www.polymer-project.org/articles/styling-elements.html

Bascially it says you should use :host inside your template.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top