1. ホーム
  2. 質問と答え
  3. ポリマー1.x：ペーパーアイコンボタンでフォントAwesomeを使用する

ポリマー1.x：ペーパーアイコンボタンでフォントAwesomeを使用する

2016-07-08 3 views
1

paper-icon-buttonのアイコンとしてアイコンfrom the Font Awesome libraryを使用する方法はありますか？ポリマー1.x：ペーパーアイコンボタンでフォントAwesomeを使用する

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>

出典

2016-07-08 Mowzer

+0

[こちら]（https://github.com/components/font-awesome）は同じもののためのコンポーネントです（使用方法に関する説明や例はありません） – a1626

答えて

1

パー@Stefanvottポリマースラックサイト上：

：

少なくとも2つの方法があります。

  1. 次のカスタム要素 https://customelements.io/philya/font-awesome-polymer-icons/ （私のために動作しませんでした。）
    2. を使用します0
  2. これを行う<paper-icon-button src="" class="fa fa-github-alt fa-lg"></paper-icon-button>per this jsBin下記のコードを参照してください。
    3.
ショートバージョンhttp://jsbin.com/hubonatopa/1/edit?html,output 
paper-icon-button.fa { 
    padding: .5em; 
    height: 2em; 
    width: 2em; 
} 
<paper-icon-button class="fa fa-github-alt fa-lg"></paper-icon-button>
フルバージョンhttp://jsbin.com/hubonatopa/1/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"> 
    <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>

出典

2016-07-08 07:29:35 Mowzer

0

私の場合には、ポリマーV1.8に私はこのlinkで説明したようにそこに、ペーストフォント素晴らしいCSSをカスタムスタイル要素を作成し、

<template> 
    <style include="shared-styles"> 
    </style> 
    <paper-button> <i class="fa fa-facebook fa-lg"></i></paper-button> 
    .............. 
    </template>
を使用して、私の要素に追加する必要がありましたが

出典

2017-03-11 22:34:00

1

このプロジェクトを使用することができます！これは、ポリマー1-2で使用するクールなバウワーパッケージです。今はFAの最後のバージョンです：4.7。ここでは：https://github.com/vangware/fontawesome-iconset

出典

2018-01-24 16:51:50 kelegorm

関連する問題

 関連する問題