使用Windows 8默认图标设置在appbar外面

时间:2012-11-10 21:07:05

标签: html windows-8

是否可以使用可在appbar外部的应用栏中使用的Windows 8(javascript)图标?

3 个答案:

答案 0 :(得分:5)

为了更准确,此代码复制相同的行为&设计,并支持下面的图标标签:

<button class="win-command win-global win-hidefocus" id="btnCamera" role="menuitem" aria-label="Camera" type="button">
    <span tabindex="-1" class="win-commandicon win-commandring" aria-hidden="true">
        <span tabindex="-1" class="win-commandimage" aria-hidden="true">&#xE114;</span>
    </span>
    <span tabindex="-1" class="win-label" aria-hidden="true">Front Camera</span>
</button>

答案 1 :(得分:1)

这很难找到,如果你期望它是一个图像而不是字体中的字符(并且Google没有给出任何有用的结果),甚至一旦你知道它需要一段时间来提取所有正确的风格,所以在这里分享这个似乎是一个好主意。

下面我列出了一个有效副本按钮的示例:

<button style="border:2px solid black;min-width:0px;min-height:0px;border-radius:50%;height:41px;line-height:37px;width:41px;font-size:14pt;box-sizing:border-box;padding:0px; background:white;color:black;font-family: 'Segoe UI', 'Ebrima', 'Nirmala UI', 'Gadugi', 'Segoe UI Symbol', 'Meiryo UI', 'Khmer UI', 'Tunga', 'Lao UI', 'Raavi', 'Iskoola Pota', 'Latha', 'Leelawadee', 'Microsoft YaHei UI', 'Microsoft JhengHei UI', 'Malgun Gothic', 'Estrangelo Edessa', 'Microsoft Himalaya', 'Microsoft New Tai Lue', 'Microsoft PhagsPa', 'Microsoft Tai Le', 'Microsoft Yi Baiti', 'Mongolian Baiti', 'MV Boli', 'Myanmar Text', 'Cambria Math'; display: inline-block; text-align: center;" type="button">&#xE124;</button>

对于字符代码,我建议在standardStyles xml文件中查看C ++ webstore项目。

答案 2 :(得分:0)

太晚了但是,我分享了我如何实现这个目标的片段:

没有标签:

<button id='buttonid' class='win-commandring win-commandicon' title='tooltip'>&#xE159;</button>

带标签:

<div style='text-align:center'>
<button class='win-commandring win-commandicon'>&#xE159;</button><br>
Save as
</div>

**不要忘记在每个字符代码后使用Semi-colon;)。*

如果你想查看图标的字符代码,那么 - &gt;

打开:

Start Menu -> Type " character Map " -> Press Enter

现在是Window opens -> Select -> Font : 'Segoe UI Symbol'

请参阅下文,您可以在其中找到 在WINDOWS 8上的图标的所有字符代码

ICON SET WINDOWS 8

也许它会有所帮助!