以下 html 在文本左侧显示了一个漂亮的相机图标。在尝试设计聚合物组件的样式时，这是如何实现的？
<!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>
具体来说，链接应该包含在哪里，applyauthorstyles 应该设置为什么，模板中的样式应该是什么。
编辑：CSS变量的解决方法：
字体真棒 CSS 文件包含一个 @font-face 定义，目前在 shadowDOM 中不起作用，至少在 Chrome 中（ref1，ref2）。解决此问题的一种方法是将 @font-face 定义从 fa CSS 文件中移出，并将其放置为全局样式标记。例如：
<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>
然后，您可以在自定义聚合物元素内部引用已编辑 fa CSS 文件的本地副本，而无需applyAuthorStyles像这样使用：
<polymer-element name="dropdown-menu-element">
<template>
<link rel="stylesheet" href="../font-awesome-4.0.3/css/font-awesome.css">
确保您已将整个 fa 目录下载到您的项目中。fa 图标现在可以在您的聚合物元素中使用。
使用 applyAuthorStyles 的原始答案：
我只是在 index.html 文件的 head 部分中包含了 font awesome 的路径：
<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>
然后在我的navbar_element.html文件中，我只是按照通常的方式引用图标：
<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}} </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>
在这种情况下，我<i class={{item.icon}}></i>在我的 navbar_element.dart 文件中使用如下可观察列表引用特定的字体真棒图标：
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)
]);
该icon字段只是Item类中的一个字段，我已经设置了bool get applyAuthorStyles => true;.
编辑
applyAuthorStyles已弃用或已删除。
我自己还没有尝试过，但是如果将字体很棒的样式添加到组件中，它应该可以工作。这很麻烦，因为需要将样式添加到使用 FA 的每个组件中。
Pixelate 使用带有这些变量的 SASS：https ://github.com/donny-dont/Pixelate-Flat/blob/master/lib/stylesheets/fonts/_variables.scss 我还没有使用 SASS，所以我不能提供更多细节。
另一种解决方案是* /deep/在每个选择器前面添加。
您可以使用此代码构建执行此操作的脚本：
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);
}
}
这个修改后的 CSS 在 shadowDOM 之外不起作用，因此需要修改和未修改的样式（每个选择器一次有，一次没有/deep/
--------
如果您
bool get applyAuthorStyles => true;
在自定义元素中需要的页面上有样式表引用。
如上所述，在自定义元素中引用样式表存在错误。该错误已修复，但包含该修复的 Dart 版本尚未发布。
同时，您可以将样式表的内容复制到自定义元素内的样式标记中<template>。在这种情况下，您不需要applyAuthorStyles.
看来这个包正在做这个 http://pub.dartlang.org/packages/fontawesome_elements
我发布了包bwu_fontawesome_iconset_svg使 FontAwesome 图标与核心元素和纸张元素兼容
这里有一个关于聚合物元素造型的指南，可能会有所帮助：
http://www.polymer-project.org/articles/styling-elements.html
基本上它说您应该在模板中使用 :host 。