Question

For a Windows 8 Application, I can create AppBar style buttons using ‘Segoe UI Symbol’ but they have drawn in a rectangle area therefore has a rectangle background. Since I want to set their background to a different color during hover, I need to get rid of this rectangle.

As pointed out in below question, the button and the style are defined like shown.

Please give a direction how this can be accomplish.

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;
}

Update:

Below code does the trick but font is not properly aligned. Probably because it is not made to align properly. Image below shows the layout.

.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

For this point you need to set border-radius:50%; so you your button will change shape to circle then add min-width:0; min-height:0; and text-align:center; here is the full 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;
}

if you don’t need border you can set border:none;. Sorry for my bad english