I know this isn't an original post, asking about how to get Font Awesome Icons in the tinyMCE RTE. I've seen this asked and answered on this forum multiple times over. But, the most recent answer does not work for me.
This is for a v10.3 site...
I have this in my appsettings.json under Umbraco > CMS >:
@HuwReddick thanks for the response! I didn't originally, but based on your suggestion I added the FA CSS to the RTE. That did not resolve the issue.
Seems unlikely that the CSS file would have any bearing on "ValidElements". In older versions of Umbraco it wasn't necessary to add the FA CSS to the RTE. In older versions you just had to modify the tinymceconfig.config file. From my reading it seems that config is now handled by appsettings.json, but I haven't found the proper config settings to make it work.
I can submit <p><i class="fa-solid fa-binoculars"></i></p> in my RTE. View source after the submit and it's blank. The OP "ValidElements" are my current settings.
Font Awesome Icon in RTE v10+
I know this isn't an original post, asking about how to get Font Awesome Icons in the tinyMCE RTE. I've seen this asked and answered on this forum multiple times over. But, the most recent answer does not work for me.
This is for a v10.3 site...
I have this in my appsettings.json under Umbraco > CMS >:
If it helps this is the FA icon code I'm trying to insert via the RTE:
<i class="fa-solid fa-binoculars"></i>Have you added the font awesome CSS file to the list of CSS files used by the rte?
@HuwReddick thanks for the response! I didn't originally, but based on your suggestion I added the FA CSS to the RTE. That did not resolve the issue.
Seems unlikely that the CSS file would have any bearing on "ValidElements". In older versions of Umbraco it wasn't necessary to add the FA CSS to the RTE. In older versions you just had to modify the tinymceconfig.config file. From my reading it seems that config is now handled by appsettings.json, but I haven't found the proper config settings to make it work.
Hi bh
TinyMce will turn i tags into ems by default, it's a while since I looked at this but
do you need to add
into your list of valid elements in appsettings?
regards
Marc
From his original post it appears to be in the list which is why I suggested adding the CSS file
@MarcGoodson thanks for your response.
I've tried
+i[class|style]and-i[class|style]andi[class|style]andi[class]. None of those worked.Hi bh,
This is what I have in my validElements
+i[class|style]and it works fineIf you do a view source code for your RTE is the
<i class="fa-solid fa-binoculars"></i>being removed, or is it just not appearing in the UI?IIRC you should be adding
<i class="fa fa-solid fa-binoculars"></i>for the icons to renderSorry! just searched for ,i[class] didn't think about the + (thanks @Huw!)
I always get confused by the + in front, think it means it's ok to make the element open when there is no child node!
so what you have @bh looks right!
I've taken the valid elements string above and cut and paste it into the appsettings of a V10.6.1 site I have locally
and it's completely fine with me adding an
<iicon when I save and publish the page and go back, the<ielement is retained.But if I pasted it outside of paragraph tags
Then it gets replaced with
That might be something to do with forcedrootblock being set to p, I don't know if I am seeing a different thing to you?
That is it I think Marc, I get the same if added outside of a containing element.
I can submit
<p><i class="fa-solid fa-binoculars"></i></p>in my RTE. View source after the submit and it's blank. The OP "ValidElements" are my current settings.Not sure if this is your problem, but you appear to have a stray ] at the end of your valid elements string
@HuwReddick thanks again. I noticed that earlier and cleaned that up. Unfortunately, that didn't fix the issue.
Not sure what else to suggest I'm afraid.
is working on a reply...