Font Awesome icons in Action Bar


#1

Hi all,

I’m trying to use Font Awesome in my app. So far I seem to be able to add icons to any normal part of the app, but cannot get them working on the Action Bar. Firstly, they display some other image in place of the actual icon, and in trying to use it on the Navigation Item for Android (Back button) it doesn’t display at all.

Can someone please provide me a code example to include a hamburget menu button in the ActionBar, as well as one or two Action Items icons, and then a back button for Android using Navigation Item. Please. I’m completely confused.


#2

This help? ActionBar: ActionItems using Icon-Fonts


#3

@sitefinitysteve I tried that, it didn’t work. It displays the wrong icon.


#4

Do the icons display fine in the body of the page? Like is it that they aren’t in the header or they dont work anywhere (font not loading properly)


#5

Loads fine in the page body, specifically struggling with Action Bar, ActionItem and NavigationButton.


#6

https://material.io/icons/#ic_assignment_ind. These icons are free and can be easily placed. Download them and place them in their respective folders.

sample code:

<NavigationButton icon=“res://ic_reorder_white_24dp” (tap)=“openDrawer()”>
<ActionItem
ios.systemIcon=“9” ios.position=“left”
icon=“res://ic_notifications_white_24dp” [nsRouterLink]="[’/notifications’]"
android.position=“actionBar”>


#7

XML

<ActionBar>
		<StackLayout class="fntsz-18 pt-lg" orientation="horizontal" horizontalAlignment="stretch">
			<Button tap="goBack" width="38" class="Material" text="&#xe5cb;" horizontalAlignment="left"></Button> <Label class="Material color-white" verticalAligment="center" text="Wallet" height="27"></Label>
		</StackLayout>
</ActionBar>

CSS

.Material{
    font-family: MaterialIcons-Regular, Material Icons;
}

#8

Thanks so much, will give it a try!


#9

Hello, @delanick . Did you try this?
Let me know.


#10

Not yet, am working on another feature of the app right now. Will try it tonight (ZA time) and will advise immediately once I have a result :slight_smile: Thanks again!