编辑: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;
.