Search code examples
xamlsilverlightwindows-phone-8font-awesomeappbar

windows phone silverlight font-awesome and appbar icon

I am making a windows phone 8 silverlight app. And I am using font-awesome icons on my app's mainpage.. they do display in the designer properly but when I run the app on emulator they don't display properly.

Also I am using normal 76 X 76 px PNG file images for appbar icons and they are not even displayed properly in the designer, they do not fit within the circle of the appbar icon, rather they try to escape the circle. I am attacking the image/screenshot from the emulator below, you can see and please tell me the solution. Thanks in advance

Image From Emulator

Image From Emulator

Image From Designer of visual studio

Image from designer of visual studio

XAML Code For ApplicationBar

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar>
        <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/scan.png"
                                        IsEnabled="True"
                                        Text="Scan"/>
        <shell:ApplicationBarIconButton IconUri="/Assets/AppBar/search.png"
                                        IsEnabled="True"
                                        Text="Search"/>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Application Resource for MainPage Icon TextBlocks

<phone:PhoneApplicationPage.Resources>
    <ResourceDictionary >
        <Style TargetType="TextBlock"
               x:Key="MainPageIcon">
            <Setter Property="FontSize"
                    Value="80" />
            <Setter Property="Width"
                    Value="90" />
            <Setter Property="FontFamily"
                    Value="/Resources/FontAwesome.otf#FontAwesome" />
            <Setter Property="TextAlignment"
                    Value="Center" />
        </Style>
    </ResourceDictionary>
</phone:PhoneApplicationPage.Resources>

XAML for one of the icons on mainpage

<TextBlock Text="&#xf02a;"  Style="{StaticResource MainPageIcon}"/>
Solution

  • Actually, picture size doesn't matter. What's important - it's a transparent borders around actual icon. Add wide transparent borders around actual images and you'll be allset.

    Incorrect image: https://i.sstatic.net/pNuJg.png

    Correct image: https://i.sstatic.net/qPdRc.png

    VS XAML designer screenshot: https://i.sstatic.net/9Jgpg.png

    Emulator screenshot: https://i.sstatic.net/ZuCUE.png