Polymer 1.x：使用字体和纸张图标按钮_Polymer_Font Awesome_Polymer 1.0_Paper Elements_Fontawesome 4.4.0

Polymer 1.x：使用字体和纸张图标按钮

polymer

Polymer 1.x：使用字体和纸张图标按钮,polymer,font-awesome,polymer-1.0,paper-elements,fontawesome-4.4.0,Polymer,Font Awesome,Polymer 1.0,Paper Elements,Fontawesome 4.4.0,是否有方法将图标用作纸张图标按钮内的图标 http://jsbin.com/rahesepeho/2/edit?html，输出 <!doctype html> <head> <meta name="description" content="iron-data-table beta3"> <meta charset="utf-8"> <base href="https://polygit.org/components/">

是否有方法将图标用作

纸张图标按钮内的图标

http://jsbin.com/rahesepeho/2/edit?html，输出

<!doctype html>
<head>
  <meta name="description" content="iron-data-table beta3">
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-icon-button/paper-icon-button.html" rel="import"> 
</head>
<body>
  <dom-module id="x-foo">
    <style>
      :host {
        font-family: arial, sans-serif;
      }
    </style>
    <template>
      <p>The below <code>paper-icon-button</code> uses an image from Github.</p>
      <paper-icon-button
        src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"
        alt="octocat" title="octocat">
      </paper-icon-button>
      <p>How do I make the below <code>paper-icon-button</code> use an icon from <a href="http://fontawesome.io/icons/" target="_blank">Font Awesome</a>?</p>
      <paper-icon-button
        src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"
        alt="octocat" title="octocat">
      </paper-icon-button>
    </template>
    <script>
      document.addEventListener('WebComponentsReady', function() {
        Polymer({
          is: 'x-foo'
        });
      });
    </script>
  </dom-module>
  <x-foo></x-foo>
</body>

paper-icon-button.fa {
    padding: .5em;
    height: 2em;
    width: 2em;
}
<paper-icon-button class="fa fa-github-alt fa-lg"></paper-icon-button>

<!doctype html>

<head>
  <meta name="description" content="iron-data-table beta3">
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-icon-button/paper-icon-button.html" rel="import">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"> </head>

<body>
  <dom-module id="x-foo">
    <style>
      :host {
        font-family: arial, sans-serif;
      }

      paper-icon-button.fa {
        padding: 10px;
        line-height: 1em;
        overflow: hidden;
      }
    </style> <template>
      <p>The below <code>paper-icon-button</code> uses an image from Github.</p>
      <paper-icon-button src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="octocat" title="octocat"></paper-icon-button>
      <p>How do I make the below <code>paper-icon-button</code> use an icon from <a href="http://fontawesome.io/icons/" target="_blank">Font Awesome</a>?</p>
      <paper-icon-button class="fa fa-github-alt fa-lg"></paper-icon-button>
    </template>
    <script>
      document.addEventListener('WebComponentsReady', function() {
        Polymer({
          is: 'x-foo'
        });
      });
    </script>
  </dom-module>
  <x-foo></x-foo>
</body>

根据聚合物松弛现场的@Stefanvott：

至少有两种方法：

使用以下自定义元素（不适用于我。）

执行此操作

。请参阅下面的代码

短版http://jsbin.com/hubonatopa/1/edit?html，输出

<!doctype html>
<head>
  <meta name="description" content="iron-data-table beta3">
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-icon-button/paper-icon-button.html" rel="import"> 
</head>
<body>
  <dom-module id="x-foo">
    <style>
      :host {
        font-family: arial, sans-serif;
      }
    </style>
    <template>
      <p>The below <code>paper-icon-button</code> uses an image from Github.</p>
      <paper-icon-button
        src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"
        alt="octocat" title="octocat">
      </paper-icon-button>
      <p>How do I make the below <code>paper-icon-button</code> use an icon from <a href="http://fontawesome.io/icons/" target="_blank">Font Awesome</a>?</p>
      <paper-icon-button
        src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"
        alt="octocat" title="octocat">
      </paper-icon-button>
    </template>
    <script>
      document.addEventListener('WebComponentsReady', function() {
        Polymer({
          is: 'x-foo'
        });
      });
    </script>
  </dom-module>
  <x-foo></x-foo>
</body>

paper-icon-button.fa {
    padding: .5em;
    height: 2em;
    width: 2em;
}
<paper-icon-button class="fa fa-github-alt fa-lg"></paper-icon-button>

<!doctype html>

<head>
  <meta name="description" content="iron-data-table beta3">
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-icon-button/paper-icon-button.html" rel="import">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"> </head>

<body>
  <dom-module id="x-foo">
    <style>
      :host {
        font-family: arial, sans-serif;
      }

      paper-icon-button.fa {
        padding: 10px;
        line-height: 1em;
        overflow: hidden;
      }
    </style> <template>
      <p>The below <code>paper-icon-button</code> uses an image from Github.</p>
      <paper-icon-button src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="octocat" title="octocat"></paper-icon-button>
      <p>How do I make the below <code>paper-icon-button</code> use an icon from <a href="http://fontawesome.io/icons/" target="_blank">Font Awesome</a>?</p>
      <paper-icon-button class="fa fa-github-alt fa-lg"></paper-icon-button>
    </template>
    <script>
      document.addEventListener('WebComponentsReady', function() {
        Polymer({
          is: 'x-foo'
        });
      });
    </script>
  </dom-module>
  <x-foo></x-foo>
</body>

在我的例子中，在polymerv1.8上，我必须创建一个自定义样式元素，如本文所述，将font awesome css粘贴到那里，然后使用

   <template>
     <style include="shared-styles">
     </style>
     <paper-button> <i class="fa fa-facebook fa-lg"></i></paper-button>
   ..............
   </template>


..............

您可以使用此项目！这是很酷的，鲍尔包装用于聚合物1-2。现在是FA的最后一个版本：4.7。此处：

是相同的bower组件（尽管它缺少关于如何使用它的任何文档或示例）