All geek questions in one place

How to include a font in a dart component?

The following html displays a nice camera icon to the left of the text. When trying to create 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>

In particular, where the link should be included, why should the auto-access attribute be used, what should be the style inside the template.

+6
source share
4 answers

EDIT

applyAuthorStyles outdated or already deleted.

I have not tried this myself yet, but it should work if font-awesome styles are added to the component. This is cumbersome because 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 have not used SASS yet, so I can not provide more details .

Another solution is to add * /deep/ before each selector.

You can use this code to create 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 does not work outside the shadowDOM, so modified and unmodified styles are needed (each selector once with and once without /deep/

See also this discussion and this p>

-------

if you have a link to the stylesheet on the desired page bool get applyAuthorStyles => true; in your custom element.

The reference to the stylesheet in the user element had the error indicated above. The bug has been fixed, but the Dart version containing the patch has not yet been released.

In the meantime, you can copy the contents of the stylesheet into a style tag inside a custom <template> element. In this case, you do not need applyAuthorStyles .

+4
source

Edit: workaround for CSS variables:

The font awesome CSS file contains the @ font-face definition, which currently does not work in shadowDOM, at least in Chrome ( ref1 , ref2 ). One way is to move the @ font-face definition from the CSS fa file and place it as a global style tag. For instance:

 <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 the local copy of the edited CSS CSS file inside your custom polymer element without having to use applyAuthorStyles as follows:

 <polymer-element name="dropdown-menu-element"> <template> <link rel="stylesheet" href="../font-awesome-4.0.3/css/font-awesome.css">

Make sure you upload the entire fa directory to your project. The fa badges can now be used in your polymer element.

Original answer using applyAuthorStyles:

I will just add an awesome font path in the head section of index.html:

 <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 navbar_element.html I simply refer to 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}}&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>

In this case, I refer to the special font awesome icon <i class={{item.icon}}></i> in the navbar_element.dart file using the observed list:

 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 set bool get applyAuthorStyles => true; .

+6
source

This package seems to do just that http://pub.dartlang.org/packages/fontawesome_elements

I published the bwu_fontawesome_iconset_svg package that makes FontAwesome icons compatible with basic paper and paper elements

+1
source

Here is a guide for styling polymer elements that may be useful:

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

Basquely, you should use: host inside your template.

0
source

Source: https://habr.com/ru/post/958240/

More articles:


All Articles