Question

以下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>

具体来说，应该在哪里包含链接，应该将applyuthuthors设置为什么，模板中的 style 应该是什么。

Answer 1

编辑：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部分中包含了字体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}}&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>

在这种情况下，我在navbar_element.dart文件中使用类似的可观察列表引用特定字体真棒图标<i class={{item.icon}}></i>：

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;。

Answer 2

编辑

applyAuthorStyles已弃用或已被删除。

我自己还没有尝试过，但是如果将font-awesome样式添加到组件中，它应该可以工作。这很麻烦，因为需要将样式添加到使用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/

另请参阅this discussion和this one

<强> -------

如果您在所需页面上有样式表参考 bool get applyAuthorStyles => true; 在您的自定义元素中。

引用自定义元素中的样式表有一个如上所述的错误。该错误已修复，但包含修复程序的Dart版本尚未发布。

在此期间，您可以在自定义元素<template>内的样式标记中复制样式表的内容。在这种情况下，您不需要applyAuthorStyles。

Answer 3

看来这个包正是这样做的 http://pub.dartlang.org/packages/fontawesome_elements

我发布了一个包bwu_fontawesome_iconset_svg，它使FontAwesome图标与核心元素和纸质元素兼容

Answer 4

这里有一个关于造型聚合物元素的指南，可能会有所帮助：

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

基本上它说你应该在模板中使用：host。

如何在dart组件中加入字体真棒？

4 个答案: