Question

我正在尝试为我的环球应用的appbar设置自定义图标。 Segoe UI符号并不具备我之后所拥有的一切。我想使用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>

这会产生非常接近appbar按钮的东西，该按钮可以点击并且可以分配行为

通过一些调整，我相信我可以让它看起来与按钮完全相同，但是我并不相信它会像普通应用栏按钮那样缩放。此外，当盘旋时，周围有这个令人讨厌的边界：

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

Answer 1

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

#ifndef LOGGER_H
#define LOGGER_H

#include "LogBackend.h"
#include <string>
#include <sstream>
#include <vector>
#include <glew/glew.h>

namespace se {
    class LogBackend;
    class Logger {
    public:

        enum class Level { WARNING, INFO, EXCEPTION, SEVERE };
        static std::string to_string(Level l);

        static void add(const LogBackend& backend);

        /*
         Methods
        */

    private:
        static std::vector<LogBackend> m_backends;
    };
}
#endif

您可以使用jQuery或直接JS轻松定位<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>并直接在其中放置一个字体真棒图标

win-commandimage

我发现图标有点小，但可以通过CSS轻松修复

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

Answer 2

我昨天遇到了这个问题。

<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” - 由于某种原因，更大的图标类（fa-lg，fa-2x，fa-3x，fa -4x）在类中声明并且在AppBar中时不起作用。

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

Windows 10 Universal Apps AppBar中的FontAwesome图标

2 个答案: