XF 2.2 Multiple font awesome icons in one xf:button ?

[Earl]

Is this possible?
I need to add 3 icons to one single button.
(Apple App store icon, Android, and desktop)

I have this in my LESS style sheet.

    .button--icon--android { .m-buttonIcon(@fa-var-mobile-android-alt, 1.13em); }
    .button--icon--appstore { .m-buttonIcon(@fa-var-app-store-ios, 1.13em); }
    .button--icon--desktop { .m-buttonIcon(@fa-var-desktop-alt, 1.13em); }

with this template code:

<div class="appInviteContainer appInviteContainer--breadcrumb">
    <xf:button class="button--small button--icon button--icon--desktop" fa="fab fa-app-store">Install the App</xf:button>
</div>

I managed to add app store button and desktop icon, both icons to the one single button.
but is it possible to get the 3rd icon (android) into the same button?

 

[Earl]

I need my CSS rule to have both of these fonts

font-family: "Font Awesome 5 Brands", "Font Awesome 5 Pro";

So I can add these three font awesome icons to &::before{ pseudo element.

.m-faContent("@{fa-var-mobile-android-alt}@{fa-var-app-store}@{fa-var-desktop-alt}");

Is there a simpler way to do this instead of hardcoding font-family?

I've seen this less function in core button less sheets: .m-faBase(); and .m-faBase('pro'); .m-faBase('brands');

 

[Paul B]

You don't need to define the font family.

To use a brand icon you would use:

&:before {
    .m-faBase('Brands');
    .m-faContent(@fa-var-android);
}

For a regular icon it would be:

&:before {
    .m-faBase();
    .m-faContent(@fa-var-star);
}

 

[Earl]

You don't need to define the font family.

To use a brand icon you would use:

&::before {
    .m-faBase('Brands');
    .m-faContent(@fa-var-android);
}

For a regular icon it would be:

&::before {
    .m-faBase();
    .m-faContent(@fa-var-star);
}

That's right, But what if I want to use a brand icon and a regular icon at the same time in one button?
for an instance,
If you add these lines to stylesheet:

&::before {
    .m-faBase();
.m-faContent("@{fa-var-mobile-android-alt}@{fa-var-app-store}@{fa-var-desktop-alt}");

Only the android and desktop icon displays, and the apple app store icon dissapears.
If you try this (with brands):

&::before {
    .m-faBase('Brands');
.m-faContent("@{fa-var-mobile-android-alt}@{fa-var-app-store}@{fa-var-desktop-alt}");

the apple app store icon only appears, and desktop and android icons dissapears.

 

[Russ]

Do you have to use XF:button? Why not just use regular HTML for the button and insert the HTML version of the fa icons

 

[Earl]

Do you have to use XF:button? Why not just use regular HTML for the button and insert the HTML version of the fa icons

And still,you have to include font-family: "Font Awesome 5 Brands", "Font Awesome 5 Pro"; rule or make a choice between Brands / Pro if you're gonna use .m-faBase(); helper

 

[Russ]

And still,you have to include font-family: "Font Awesome 5 Brands", "Font Awesome 5 Pro"; rule or make a choice between Brands / Pro if you're gonna use .m-faBase(); helper

I was referring to this actually:

<a href="#" class="button button--app"><xf:fa icon="fab fa-app-store" /> <xf:fa icon="fab fa-android" /> <xf:fa icon="fa-desktop" /><span>Install the app</span></a>

.button.button--app    i
{
    margin-right: 5px;
}

Result:

 

[Earl]

I was referring to this actually:

<a href="#" class="button button--app"><xf:fa icon="fab fa-app-store" /> <xf:fa icon="fab fa-android" /> <xf:fa icon="fa-desktop" /><span>Install the app</span></a>

.button.button--app    i
{
    margin-right: 5px;
}

Result:


View attachment 244291

Awesome. I guess I can use this code. I've never seen this xf:fa tag before! Thank you!