以下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>
具体来说,应该在哪里包含链接,应该应用什么样的应用程序设置,模板中的样式应该是什么.
小智 6
编辑: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}} </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.
| 归档时间： |
|
| 查看次数： |
1186 次 |
| 最近记录： |