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.png

Earl

Well-known member
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');
 

Brogan

XenForo moderator
Staff member
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);
}
 

Earl

Well-known member
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:

Earl

Well-known member
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

Well-known member
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.png
 
Solution

Earl

Well-known member
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