Font Awesome Javascript Implementation


#1

I am programming an app using Javascript and I cannot figure out how to implement Font Awesome fonts. I would like to add the “fa-user”/“f007” font. What is the syntax to do this in my settings-page.xml file, settings-view-typing.js, and _app-root-common.scss? Thanks!

settings-view-model.js

const observableModule = require(“data/observable”);

const SelectedPageService = require("…/shared/selected-page-service");

function SettingsViewModel() {
SelectedPageService.getInstance().updateSelectedPage(“Settings”);

const viewModel = observableModule.fromObject({
    items: [
        {
            profile: "Edit Profile",
            description: ""
            //description: "https://image.freepik.com/free-icon/user-shape_318-42150.jpg"
        },
        {
            name: "Banks & Cards",
            description: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Credit_card_font_awesome.svg/2000px-Credit_card_font_awesome.svg.png"
        },
        {
            name: "Privacy",
            description: "Description for Item 3"
        },
        {
            name: "Notifications",
            description: "Description for Item 3"
        },
        {
            name: "",
            description: "Description for Item 3"
        },
        {
            name: "Touch ID",
            description: "Description for Item 3"
        },
        {
            name: "Change Password",
            description: "Description for Item 3"
        },
        {
            name: "Sign Out",
            description: "Description for Item 3"
        }
    ]
});

return viewModel;

}

module.exports = SettingsViewModel;

settings-page.xml

<ActionBar class="action-bar">
    <!-- 
    Use the NavigationButton as a side-drawer button in Android
    because ActionItems are shown on the right side of the ActionBar
    -->
    <NavigationButton ios:visibility="collapsed" icon="res://menu" tap="onDrawerButtonTap"></NavigationButton>
    <!-- 
    Use the ActionItem for IOS with position set to left. Using the
    NavigationButton as a side-drawer button in iOS is not possible,
    because its function is to always navigate back in the application.
    -->
    <ActionItem icon="res://navigation/menu" 
        android:visibility="collapsed" 
        tap="onDrawerButtonTap"
        ios.position="left">
    </ActionItem>
    <Label class="action-bar-title" text="Settings"></Label>
</ActionBar>


<ListView items="{{ items }}" itemTap="onItemTap" class="list-group">
    <ListView.itemTemplate>
        <StackLayout orientation="horizontal" class="list-group-item">
            <Label class="fa fa-user" text="&#xf0f3;"></Label>
            <!--<Image row="0" col="0" src="{{ description }}" class="thumb img-circle" rowSpan="1"></Image>-->
            <Label row="0" col="1" text="{{ profile }}"></Label>
            <!--<Label text="{{ name }}" textWrap="true"></Label>-->
        </StackLayout>
    </ListView.itemTemplate>
</ListView>

_app-root-common.scss

<ActionBar class="action-bar">
    <!-- 
    Use the NavigationButton as a side-drawer button in Android
    because ActionItems are shown on the right side of the ActionBar
    -->
    <NavigationButton ios:visibility="collapsed" icon="res://menu" tap="onDrawerButtonTap"></NavigationButton>
    <!-- 
    Use the ActionItem for IOS with position set to left. Using the
    NavigationButton as a side-drawer button in iOS is not possible,
    because its function is to always navigate back in the application.
    -->
    <ActionItem icon="res://navigation/menu" 
        android:visibility="collapsed" 
        tap="onDrawerButtonTap"
        ios.position="left">
    </ActionItem>
    <Label class="action-bar-title" text="Settings"></Label>
</ActionBar>


<ListView items="{{ items }}" itemTap="onItemTap" class="list-group">
    <ListView.itemTemplate>
        <StackLayout orientation="horizontal" class="list-group-item">
            <Label class="fa fa-user" text="&#xf0f3;"></Label>
            <!--<Image row="0" col="0" src="{{ description }}" class="thumb img-circle" rowSpan="1"></Image>-->
            <Label row="0" col="1" text="{{ profile }}"></Label>
            <!--<Label text="{{ name }}" textWrap="true"></Label>-->
        </StackLayout>
    </ListView.itemTemplate>
</ListView>

#2

Why don’t you try this plugin


#3

Thanks so much! I am almost down with the walkthrough, however, I am not sure what file the converter code goes in.