文章/答案/技术大牛

发布

社区首页 >问答首页 >聚合物1.x:通过纸张图标按钮使用字体令人敬畏

问聚合物1.x:通过纸张图标按钮使用字体令人敬畏
EN

Stack Overflow用户

提问于 2016-07-08 13:02:59

回答 2查看 1.2K关注 0票数 1

有没有办法在paper-icon-button中使用图标from the Font Awesome library作为图标

Here is my jsBin。

http://jsbin.com/rahesepeho/2/edit?html,output

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

polymer

font-awesome

polymer-1.0

paper-elements

fontawesome-4.4.0

回答 2

Stack Overflow用户

发布于 2018-01-25 00:51:51

你可以使用这个项目！在聚合物1-2中使用是很酷的，鲍尔包装。现在是FA: 4.7的最后一个版本。这里：https://github.com/vangware/fontawesome-iconset

票数 1

Stack Overflow用户

发布于 2017-03-12 06:34:01

在我的例子中，在聚合物v1.8上，我必须创建一个自定义样式元素，就像这个link中描述的那样，将字体粘贴到那里，然后使用以下命令将其添加到我的元素中

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38259201

复制

相似问题

问聚合物1.x:通过纸张图标按钮使用字体令人敬畏
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问聚合物1.x:通过纸张图标按钮使用字体令人敬畏EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问聚合物1.x:通过纸张图标按钮使用字体令人敬畏
EN