Как включить шрифт, потрясающий в дротиком?

Следующий 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>

В частности, где должна ссылка быть включена, что должно applyauthorstyles быть установлено на то, что стиля в шаблоне должен быть.

источник

2013-11-17 user1338952

Этого вопрос должен иметь полезную информацию для Вас: https: //code.google.com/p/dart/issues/detail?id=12434 –

РЕДАКТИРОВАТЬ

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/

Смотрите также this discussion и this one

-------

, если у вас есть справочная таблица стилей bool get applyAuthorStyles => true; в вашем пользовательском элементе.

Ссылка на таблицу стилей в пользовательском элементе имела ошибку, указанную выше. Исправлена ошибка, но версия Dart, содержащая исправление, еще не выпущена.

Тем временем вы можете скопировать содержимое таблицы стилей в тег стиля внутри настраиваемого элемента <template>. В этом случае вам не понадобятся applyAuthorStyles.

источник

2013-11-23 20:40:08

'applyAuthorStyles' [устарело] (https://groups.google.ком/д/тзд/полимер-DEV/OJtrbA8ZBfM/kd1GCWapeCkJ). – forresto

Итак, что нового исправить? ApplyAuthorStyles исправил его - теперь с последним полимерным возвратом к отсутствию шрифтов. – user1338952

Я обновил свой ответ. –

Существует руководство по укладке полимерных элементов, которые здесь могут быть полезны:

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

Bascially он говорит, что вы должны использовать: хост внутри шаблона.

источник

2013-11-17 10:41:28

Edit: Временное решение для CSS переменных:

Шрифт удивительный CSS файл включает в себя определение @ шрифт лицу, которое в настоящее время не работает в shadowDOM, по крайней мере, в Chrome (ref1, ref2). Один из способов - переместить определение @ font-face из файла CSS fa и поместить его как глобальный тег стиля. Например:

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

Вы можете ссылаться на локальную копию редактируемого метрономы 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> 
    <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>

В этом случае, я ссылающийся на удивительный значок конкретного шрифта, <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;.

источник

2013-11-19 02:21:33 scribeGriff

Спасибо. Если я: (1) поместил ссылку font-awsome на верхний уровень html (2) в компонент, добавьте строку типа '

Изображение аннотированного текста

' и (3) put та же линия в теле высшего уровня рядом с моим компонентом, я надеюсь, что картина будет рядом с текстом для обоих. Это для экземпляра верхнего уровня, но не для компонента. Является ли код, который вы ссылаетесь на открытый исходный код на github/pub? Вы говорите, что это работает? Похоже, что мои проблемы могут быть связаны с ошибкой, отмеченной Деннисом, - не уверен. Я нахожусь на сборке 30187. – user1338952

Приложение - это определенная работа (т. Е. Она грязная), но у меня не было проблем с иконками, по крайней мере, в Dartium - я не проверял js. Библиотека [здесь] (https://github.com/scribeGriff/convolve_polymer), а элемент, показанный выше, - [здесь] (https://github.com/scribeGriff/convolve_polymer/tree/master/web/elements) , Я добавил скриншот к readme, показывающий, как я использую значки fa. Ваша заявка может быть разной. Надеюсь, это поможет. – scribeGriff

Я еще не понял, что у меня проблема: продолжите поиск. Но ваш проект очень привлекателен, поэтому у меня есть больше возможностей для изучения. Благодаря! – user1338952

Кажется, этот пакет делает именно это http://pub.dartlang.org/packages/fontawesome_elements

я опубликовал пакет bwu_fontawesome_iconset_svg, что делает FontAwesome иконки совместимо с сердечником элементами и бумажными элементами

источник

2014-07-09 13:30:24

Как включить шрифт, потрясающий в дротиком?

ответ

Смежные вопросы