Polymer 1.x: Использование шрифта Awesome с кнопкой-иконки

Есть ли способ использовать значок from the Font Awesome library как значок внутри paper-icon-button?Polymer 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

[Здесь] (https://github.com/components/font-awesome) является компонентом bower для того же (хотя в нем нет документации или примера о том, как ее использовать) – a1626

Per @Stefanvott на Слак сайте Polymer:

~~Есть по крайней мере два способа:~~

~~Используйте следующий пользовательский элемент https://customelements.io/philya/font-awesome-polymer-icons/~~ (не работает для меня.)
Сделайте это <paper-icon-button src="" class="fa fa-github-alt fa-lg"></paper-icon-button>per this jsBin. См. Ниже код.

Короткая версия 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

в моем случае, на полимере 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-2. Теперь это последняя версия FA: 4.7. Здесь: https://github.com/vangware/fontawesome-iconset

источник

2018-01-24 16:51:50 kelegorm

Polymer 1.x: Использование шрифта Awesome с кнопкой-иконки

ответ

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