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

Question

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

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

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

<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

我昨天遇到了这个问题。

<div data-win-control="WinJS.UI.AppBar" id="appBar" data-win-options="{placement: 'bottom'}" style="overflow: hidden;">       
         <button class="fa fa-flask" style="font-size: 2em; padding-bottom: 15px;" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'flaskBtn', section:'global', label: 'Lab', tooltip:'Lab'}"></button>         
</div>

Javascript:

var myAppBar = element.querySelector("#appBar");
myAppBar.winControl.closedDisplayMode = "full";

这对我有用。为了放大字体大小，我不得不使用 style="font-size: 2em"——出于某种原因，更大的图标 classes (fa-lg, fa-2x , fa-3x, fa-4x) 在 class 中声明并且在 AppBar 中时不起作用。

class="fa fa-flask fa-2x" 如果您在 AppBar 之外创建 Font Awesome 元素，则有效。

Answer 2

我已经找到了答案 - 使用脚本可以很容易地完成。我使用 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;
}

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

FontAwesome icons in the AppBar of Windows 10 Universal Apps

html

css

windows-store-apps

font-awesome

appbar