Font Awesome tips

*Note for myself

I couple of things I need to re-learn every time I need to use Font Awesome with Softr:

  1. Use v4 https://fontawesome.com/v4/icon

  2. If you are adding the HTLM in an Airtable field, make sure you change class value to single quotes <i class='fa fa-map-marker'></i>. If you copy it directly you’ll bring it over with double quotes and your browser (or Softr) will break it.

This is how it’ll be interpreted, leaving fa-map-marker wondering about out of the class value:
<i class="fa" fa-map-marker aria-hidden="true"></i>

2 Likes

Thanks for the tips! Would you be willing to share how you frequently use these icons? Like, if putting in airtable, are they being used for list item names etc? I saw someone using them in their navigation items and it looked super professional! I will definitely be trying to implement when I have a chance :slight_smile:

Airtable formula field with "<i class='fa fa-map-marker'></i>" & ' ' & {City-Area}

2 Likes

Another use case, this one adding a Twitter link in the header directly in Softr

Captura de Pantalla 2023-06-22 a las 16.42.45

I’m curious about the reason for V4. I am using the latest Font Awesome, 6 I think, without issue. Have you had issues?

You’re right and can’t say why tbh, I know we have v6, and I can see it on the Inspector… Eppur si muove… this is what I get using v6.4 and I don’t have the time to look into this, my needs are pretty basic anyways

Captura de Pantalla 2023-06-23 a las 9.32.41

It did not occur to me yesterday, but I wonder if you have a Font Awesome subscription and have it embedded in your site as manual code? Not that you’d need to do that, but that would explain why 6 works for some and does not for others. I think by default, Softr has the free version embedded, which includes a ton, but not the latest versions and certain weights on icons. No reason to buy a subscription; we just happen to have one for other client needs.

Also, I did not know you could use an icon as link text in Softr. That is awesome, thanks for the tip!

Do you guys know why the font awesome free icons, wont get displayed on my site?

1 Like

@acjnas, It could be that there are two in a row - try the other one individually and see if it shows up. Also, it could be what Carlos and I were discussing about the version of the icon. You may think you have grabbed a free one, but it may be a variation that is not free. The type of block could also be a factor - custom code vs a standard block may have different behaviors. If it is code, you might troubleshoot it with chatGPT. Be sure to tell chatGPT this is a custom code block in Sortr.

UPDATE.

All issues were fixed as soon I added the font awesome script in my project’s header.

I was relying on softr native support.