XPages and Me

My Journey into XPages Development

Diving into Bootstrap and Font Awesome – Introduction and Part 1: FA Icon Position in Button

In my series “Dabbling in Bootstrap and Font Awesome” I showed you how to set up the themes and created reusable custom controls.

In this new series, I will try to demonstrate, how I used some of the custom controls in my own applications in hopes, it will give you some ideas on how to use all that stuff.

If you have any special requests, what to show you, please let me know and I try to accommodate your wishes.

Additionally, once we get into this series for a bit, I hope to make another NotesIn9 video ( if David lets me ;o) ) to summarize some of the things already covered.

As a first post in this series, I wanted to show you, how to put an icon to the right of the text of a button.

I have an application that uses “Next” and “Back” buttons for the user to step thru a process. Using my FA Icon custom control, I can easily add a chevron pointing to the left and positioned to the left of “Back” on my back button:

Image 1

Here is the xml markup for the button:

<xp:button
	id="actBack"
	value="Back"
	styleClass="btn-lg">
	<xc:ccSYS_FA_Icon
		iconFixedWidth="true"
		iconSpinning="false"
		helperClassAlignment="none"
		helperClassColor="none"
		iconName="fa-chevron-left">
	</xc:ccSYS_FA_Icon>
</xp:button>

Now, for the button “Next”, obviously, I’d like to display the chevron to the right of the text “Next”. At first I thought, I could do it by just adding the helper class “pull-right” to the icon:

<xp:button
	id="actNext"
	styleClass="btn-lg"
	value="Next">
	<xc:ccSYS_FA_Icon
		iconFixedWidth="true"
		iconSpinning="false"
		helperClassAlignment="pull-right"
		helperClassColor="none"
		iconName="fa-chevron-right">
	</xc:ccSYS_FA_Icon>
</xp:button>

But that didn’t work, it was looking like this:

Image 2

Not what I had hoped for.

But, the solution for that was rather simple. Instead of using the button’s “Label” property for the text, I just added a label within the button tag.

This will allow you to set the order in which the label and the icon gets rendered, based on your needs.

Here is the XML markup:

<xp:button
	id="actNext"
	styleClass="btn-lg">
	<xp:label
		value="Next"
		id="lblActNext">
	</xp:label>
	<xc:ccSYS_FA_Icon
		iconFixedWidth="true"
		iconSpinning="false"
		helperClassAlignment="none"
		helperClassColor="none"
		iconName="fa-chevron-right">
	</xc:ccSYS_FA_Icon>
</xp:button>

And this is, how the button looks now:

Image 3

If you were to reverse the order, putting the icon tag first and the label tag second within the button tag:

<xp:button
	id="actNext"
	styleClass="btn-lg">
	<xc:ccSYS_FA_Icon
		iconFixedWidth="true"
		iconSpinning="false"
		helperClassAlignment="none"
		helperClassColor="none"
		iconName="fa-chevron-right">
	</xc:ccSYS_FA_Icon>
	<xp:label
		value="Next"
		id="lblActNext">
	</xp:label>
</xp:button>

The button would then look like this:

Image 4

Easy.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: