Icons in Text Component?

[Jim_Austin]

In ‘Business Consulting’ blueprint, on the Home page (upper right-hand side) a row of social media icons appears (just to left of ‘WORK WITH ME’ button).

I don’t understand how these icons get rendered. ‘Header icon-2’ is a Text component; how does an icon end up there?

The controlling logic seems to be in the ‘Header icon-2’ Class List Logic:

The necessary action seems to be setting the ‘Classes of Header icon-2’ property fab fa-xxxx to ‘fab fa-xxxx’, where xxxx is the ‘name’ from the ‘sociallinks’ column of the ‘ContactInfo’ table. Note the original code only shows facebook, twitter, and instagram icons: ‘visibleOnNav’ is false for linkedIn, and there is no Class List (or On Click) Logic for linkedIn.

I’ve added the logic for linkedIn (code above) but had to use fab fa-instagram in the ‘Classes of’, as there doesn’t seem to be a ‘fab fa-linkedin’ (although the space where the icon remains clickable, since I added the linkedIn logic to the On Click Event). (also set visibleOnNav to true for linkedIn)

My questions:

• what are the fab fa-xxxx properties and the values they’re set to?
• how do they put the icon in a Text component?
• where do I find them so I can add fab fa- linkedIn?

[Dima_Vak]

Hello @Jim_Austin

what are the fab fa-xxxx properties and the values they’re set to?

It is classes from Font Awesome icons

how do they put the icon in a Text component?

You should import Font Awesome and add needed classes to Text component

where do I find them so I can add fab fa- linkedIn?

Here

Regards, Dima

[Jim_Austin]

Thanks Dima, it’s now more clear where ‘fab’ classes come from. But it’s unclear as to why/what I need to import, as the three other icons came in with the blueprint app. What would I be importing, and where to?
Your ‘Here’ link leads to this FontAwesome screen:

Is this the HTML that needs to get imported? If so, to where in the app?

[viktor.liablin]

Hello @Jim_Austin

List of contact icons based on the field “sociallinks” in the “Contactinfo” table

Dynamic list Logic

Icon’s classes

Regards,
Viktor

[Dima_Vak]

@Jim_Austin
I’ve told you about importing the fonts files, which you need if you want to set up these icons in the new project, sorry if I confused you.
Import you could find in Theme → Extensions → fonts file

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css";

Is this the HTML that needs to get imported? If so, to where in the app?

You could copy these classes and add them to the empty Text component and an Icon should appear.

One more detail, you should use a search with the 5th version as shown below because we import the 5th version of this font.

[Jim_Austin]

Thanks Viktor and Dima, you’ve really helped me fill in my understanding of what’s going on.

Viktor,
I’d found the table/column/logic that controls the icon display. Note that the original Header icon-2 On Click and Class List Logic leaves out the ‘else if’ linkedIn clause. In adding it I used ‘fab fa-linkedIn’ for the property and value. But the ‘Contacts social icon’ (on Contact page) correctly displays the linkedIn icon, showing that the necessary call is ‘fab fa-linkedin’ … typical coding ‘gotcha!’

Dima,
As noted above, the FontAwesome LinkedIn icon is already available, just waiting for me to get the spelling right . Your post showed me how the FontAwesome fonts ‘get into’ the system … I had glanced through that fonts file but didn’t make the connection to my questions.

Thanks again to both of you … it’s great to have this kind of support!