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?
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:
@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
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!
. 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.