locked
Problem loading custom images in appbar buttons

    Question

  • HI...

    I am trying to add my custom png image to an appbar button as i've 26X26 pixel png image but it is not working for me. Its always overlaping the button size.

    here is my piece of code...

    <div id="appbar" data-win-control="WinJS.UI.AppBar">
            <button data-win-control="WinJS.UI.AppBarCommand"
                    data-win-options="{id:'btn2',label:'custom',icon:'url(images/bug.png)',section:'global',tooltip:'custom'}"></button>
    </div>

    Thursday, July 24, 2014 12:20 PM

Answers

  • Hi Sanjay,

    If you want to customize the appbar command buttons, you may need to re-write the CSS for them: Quickstart: Styling app bars. 

    And I'm not quite understand what do you mean by overlapping the button size here, you mean even you are using the 26*26 pixel image, the button size is still 40*40? Well, this is pre-defined in the CSS:

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Friday, July 25, 2014 1:36 AM
    Moderator