html - Windows 8 : Creating AppBar Style Buttons with HTML5/CSS

Question

对于 Windows 8 应用程序，我可以使用“Segoe UI Symbol”创建 AppBar 样式按钮，但它们绘制在矩形区域中，因此具有矩形背景。因为我想在悬停期间将它们的背景设置为不同的颜色，所以我需要去掉这个矩形。

正如下面问题所指出的，按钮和样式的定义如下所示。

请给出如何实现的方向。

create image from character

HTML:

<button id="myAppBarIcon" class="normal-size-icon">&#xE1D8;</button>

CSS:

.normal-size-icon {
    margin-top: 400px;
    margin-left: 630px;
    position: relative;
    font-size: 24px;
    font-family: 'Segoe UI Symbol';
    color: rgb(255, 255, 255);
    background: none;
    border: none;
}

更新:

下面的代码可以解决问题，但字体没有正确对齐。可能是因为它没有正确对齐。下图显示了布局。

.normal-size-icon {
    font-size: 24px;
    font-family: 'Segoe UI Symbol';
    color: rgb(555, 255, 255);
    min-width: 0;
    min-height: 0;
    border-radius: 50%;
    border-style: solid;
    padding: 0;
    text-align: center;
}

Answer 1

为此，您需要设置 border-radius:50%; 这样您的按钮就会变成圆形，然后添加 min-width:0; min-height:0; 和 text-align:center; 这是完整的 css:

.normal-size-icon {
    font-size: 24px;
    font-family: 'Segoe UI Symbol';
    color: rgb(555, 255, 255);
    min-width: 0;
    min-height: 0;
    border-radius: 50%;
    border-style: solid;
    padding: 0;
    text-align: center;
}

如果不需要边框可以设置border:none;。抱歉我的英语不好