Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>Edit: Workaround for CSS variables:</strong></p> <p>The font awesome CSS file includes an @font-face definition which does not currently work in the shadowDOM, at least in Chrome (<a href="http://robdodson.me/blog/2013/11/19/at-font-face-doesnt-work-in-shadow-dom/" rel="nofollow">ref1</a>, <a href="https://groups.google.com/forum/#!topic/polymer-dev/UUwew3x82EU" rel="nofollow">ref2</a>). 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:</p> <pre class="lang-dart prettyprint-override"><code>&lt;html&gt; &lt;head&gt; &lt;style&gt; @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&amp;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; } &lt;/style&gt; &lt;script type='application/dart'&gt;export 'package:polymer/init.dart';&lt;/script&gt; &lt;script type="text/javascript" src="packages/browser/dart.js"&gt;&lt;/script&gt; </code></pre> <p>You can then reference a local copy of the edited fa CSS file internal to your custom polymer element with no need to use <code>applyAuthorStyles</code> like this:</p> <pre class="lang-dart prettyprint-override"><code>&lt;polymer-element name="dropdown-menu-element"&gt; &lt;template&gt; &lt;link rel="stylesheet" href="../font-awesome-4.0.3/css/font-awesome.css"&gt; </code></pre> <p>Make sure you have downloaded the entire fa directory to your project. The fa icons can now be used in your polymer element.</p> <p><strong>Original Answer using applyAuthorStyles:</strong></p> <p>I just include the path to font awesome in the head section of the index.html file:</p> <pre class="lang-dart prettyprint-override"><code>&lt;head&gt; &lt;title&gt;Working with Polymer&lt;/title&gt; &lt;link rel="stylesheet" href="css/font-awesome-4.0.0/css/font-awesome.min.css"&gt; &lt;link rel="import" href="elements/navbar_element.html"&gt; &lt;script type='application/dart'&gt; export 'package:polymer/init.dart'; &lt;/script&gt; &lt;script type="text/javascript" src="packages/browser/dart.js"&gt;&lt;/script&gt; &lt;/head&gt; </code></pre> <p>Then in my <code>navbar_element.html</code> file, I just reference the icons the way you normally would:</p> <p></p> <pre class="lang-dart prettyprint-override"><code>&lt;polymer-element name="navbar-element"&gt; &lt;template&gt; &lt;style&gt; /* other styles here */ } &lt;/style&gt; &lt;div&gt; &lt;div class="st-container"&gt; &lt;nav class="st-nav"&gt; &lt;template repeat="{{item in menu}}" &gt; &lt;a id={{item.id}} href="#" class={{item.arrowClass}} on-click="{{menuHandler}}"&gt; &lt;span class="menuName"&gt;{{item.text}}&amp;nbsp;&lt;/span&gt; &lt;i class={{item.icon}}&gt;&lt;/i&gt; &lt;/a&gt; &lt;/template&gt; &lt;div class="arrow_box"&gt;&lt;/div&gt; &lt;/nav&gt; &lt;/div&gt; &lt;/div&gt; &lt;/template&gt; &lt;script type="application/dart" src="navbar_element.dart"&gt;&lt;/script&gt; &lt;/polymer-element&gt; </code></pre> <p>In this case, I am referencing the specific font awesome icon, <code>&lt;i class={{item.icon}}&gt;&lt;/i&gt;</code>, in my navbar_element.dart file using an observable list like so:</p> <pre class="lang-dart prettyprint-override"><code>final ObservableList&lt;Item&gt; 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) ]); </code></pre> <p>where the <code>icon</code> field is just a field in the <code>Item</code> class and I've set <code>bool get applyAuthorStyles =&gt; true;</code>.</p>
    singulars
    1. This table or related slice is empty.
    1. POhow to incorporate font awesome in a dart component?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USGünter Zöchbauer
    1. USscribeGriff
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThanks. If I: (1) put the font-awsome link in top level html (2) in the component add a line like `<p><i class="fa fa-tasks"></i>Picture annotated text</p>` and (3) put the same line in top level body near my component, my hope was a picture would be beside the text for both. It is for top level instance, but the not one in component. Is the code you are referencing open source on github/pub? You saying it works? Sounds like my issues may be related to the bug pointed out by Dennis - not sure. I'm on build 30187.
      singulars
      1. PO
      1. USuser1338952
    2. COThe app is a definitely a work in progress (ie, it's messy), but I've not had any issue with the icons, at least in Dartium - I have not checked in js. The library is [here](https://github.com/scribeGriff/convolve_polymer) and the element I showed above is [here](https://github.com/scribeGriff/convolve_polymer/tree/master/web/elements). I added a screenshot to the readme showing how I am using the fa icons. Your application could certainly be different. Hope that helps.
      singulars
      1. PO
      1. USscribeGriff
    3. COI have not figured my problem out yet - will keep searching. But your project is very attractive - so I have more to study. Thanks!
      singulars
      1. PO
      1. USuser1338952
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload