Menu
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.
331
You place Font Awesome icons by using the prefix fa and the icon's name.
Adding Font Awesome to Your CompileOpen your project's scss/variables. scss and edit the $fa-font-path variable to point to where you placed the webfonts folder. $fa-font-path: "../webfonts"; In your main SCSS compile file, import Font Awesome by adding the core styles file, @import "scss/fontawesome.
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}} </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;.
71
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.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
