I’m trying to include a font awesome icon on the right side of a custom html card. I’m having two problems. First, the icon displays when using the html editor in BF, but not in the browser. Second, I’m not sure how to get it to display all the way to the right on the card, rather than right after the text in the preceding div.
For the icon, that would be a result of the version of font-awesome that you have installed on your site, which may be different than in the staging editor. How does it look when you edit your page at app.fmbetterforms.com? Regardless, this would most likely be solved by using the fa class instead of fas.
As for the spacing issue. I would suggest using a flex container. If you are using Tailwind CSS on your site, this could be as simple as adding a flex class on your line 6 and a flex-1 class on the div inside it. The editor uses tailwind so you can preview it there, but you’d also need to make sure it’s installed on your site for it to take effect in production
For the first issue, I suspect you don’t have the CDN link for the icon set. The editor has font awesome version 5
Just on mobile but will comment on second when I can see code well.
Thanks! Using the fa class took care of that issue. Still having trouble with the spacing. I added the flex and flex-1 classes, but it doesn’t seem to have any effect in the editor. Did I put them in the wrong place?
You would also need the flex class on row 9 in your case
Added flex class to row 9, but the icons aren’t budging in the editor. (Haven’t tried on site because I haven’t added tailwind to site, yet.)
Got it, now. I had to move the span element containing the icon to it’s own div. Thanks, Charles, for pointing me to the examples here: https://staging.fmbetterforms.com/#/form/FR_F102C5B4-DB75-9140-B537-D33F04D86146