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

Earl

Well-known member
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.
CSS:
    .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:
HTML:
<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?
 
Solution
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:

Code:
<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>

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

Result:


S8oj1Py.webp
I need my CSS rule to have both of these fonts
CSS:
font-family: "Font Awesome 5 Brands", "Font Awesome 5 Pro";
So I can add these three font awesome icons to &::before{ pseudo element.
CSS:
.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');
 
You don't need to define the font family.

To use a brand icon you would use:
Less:
&:before {
    .m-faBase('Brands');
    .m-faContent(@fa-var-android);
}

For a regular icon it would be:
Less:
&:before {
    .m-faBase();
    .m-faContent(@fa-var-star);
}
 
You don't need to define the font family.

To use a brand icon you would use:
Less:
&::before {
    .m-faBase('Brands');
    .m-faContent(@fa-var-android);
}

For a regular icon it would be:
Less:
&::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:
CSS:
&::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):
CSS:
&::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. :(
 
Last edited:
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
 
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:

Code:
<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>

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

Result:


S8oj1Py.webp
 
Solution
I was referring to this actually:

Code:
<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>

Code:
.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!
 
Top Bottom