html - Windows 10 通用应用程序的 AppBar 中的 FontAwesome 图标

Question

我正在尝试为我的通用应用的应用栏设置自定义图标。 Segoe UI Symbol 只是没有我想要的一切。我想使用 FontAwesome。不幸的是，我不知道该怎么做。

我能找到的将自定义图标放入应用栏的唯一官方方法是使用 PNG，但它们的缩放比例和字体都不太好，而且制作起来很笨拙。

我最接近的是在 appbar 上创建一个基于 div 的元素，它看起来像一个 appbar 按钮:

<div data-win-control="WinJS.UI.AppBarCommand" 
    data-win-options="{ id:'btnLab',label:'Lab', section:'global', type:'content'}">
    <div id="itemContainer" data-win-control="WinJS.UI.ItemContainer">
        <i class="fa fa-flask" style="color: #000; font-size: 19px; 
           padding: 10px; border: 2px solid #222; border-radius: 50%;">
        </i>
        <br/>
        <span style="color: #000; font-size: 12px;">Lab</span>
    </div>
</div>

这产生了一些非常接近应用栏按钮的东西，它是可点击的并且可以被分配一个行为

通过一些调整，我相信我可以让它看起来与按钮相同，但是我不确定它是否会像普通应用栏按钮一样缩放。此外，当鼠标悬停时，它周围会出现令人讨厌的边框:

有谁知道如何直接在按钮中使用 font-awesome 或其他一些基于字体的图标集？

Answer 1

我已经找到了答案 - 使用脚本可以很容易地完成。我使用 DOM 检查器发现按钮图像的实际 HTML 是这样的

<button class="win-disposable win-command win-global" id="cmdKey" role="menuitem" 
  aria-label="Key" type="button" data-win-options="{id:'cmdKey',label:'Key',icon:'',
  section:'global',tooltip:'testing out font-awesome'}" 
  data-win-control="WinJS.UI.AppBarCommand">
    <span tabindex="-1" class="win-commandicon win-commandring" 
     aria-hidden="true">
         <span tabindex="-1" class="win-commandimage" aria-hidden="true" 
          style="-ms-high-contrast-adjust: none;"></span>
    </span>
    <span tabindex="-1" class="win-label" aria-hidden="true">
         Key
    </span>
</button>

您可以使用 jQuery 或直接 JS 非常轻松地定位 win-commandimage 并直接在其中放置一个很棒的字体图标

$('#cmdKey .win-commandimage').html('<i class="fa fa-key"></i>');

我发现图标有点小，但这可以很容易地用 CSS 修复

#cmdKey .win-commandimage
{
    font-size: 20px;
}