Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • bh 413 posts 1400 karma points
    1 week ago
    bh
    0

    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 >:

    "RichTextEditor": {
      "ValidElements": "+a[id|style|rel|data-id|data-udi|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],+i[class|style],-strong/-b[class|style],-em[class|style],-strike[class|style],-u[class|style],#p[id|style|dir|class|align],-ol[class|reversed|start|style|type],-ul[class|style],-li[class|style],br[class],img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align|umbracoorgwidth|umbracoorgheight|onresize|onresizestart|onresizeend|rel|data-id],-sub[style|class],-sup[style|class],-blockquote[dir|style|class],-table[border=0|cellspacing|cellpadding|width|height|class|align|summary|style|dir|id|lang|bgcolor|background|bordercolor],-tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],tbody[id|class],thead[id|class],tfoot[id|class],#td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope],-th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style],-span[class|align|style],-pre[class|align|style],address[class|align|style],-h1[id|dir|class|align|style],-h2[id|dir|class|align|style],-h3[id|dir|class|align|style],-h4[id|dir|class|align|style],-h5[id|dir|class|align|style],-h6[id|style|dir|class|align|style],hr[class|style],small[class|style],dd[id|class|title|style|dir|lang],dl[id|class|title|style|dir|lang],dt[id|class|title|style|dir|lang],object[class|id|width|height|codebase|*],param[name|value|_value|class],embed[type|width|height|src|class|*],map[name|class],area[shape|coords|href|alt|target|class],bdo[class],button[class],iframe[*],figure,figcaption]",
      "CustomConfig": {
        "style_formats": "[{\"title\":\"Headers\",\"items\":[{\"title\":\"Heading h1\",\"block\":\"h1\"},{\"title\":\"Heading h2\",\"block\":\"h2\"},{\"title\":\"Heading h3\",\"block\":\"h3\"},{\"title\":\"Heading h4\",\"block\":\"h4\"},{\"title\":\"Heading h5\",\"block\":\"h5\"},{\"title\":\"Heading h6\",\"block\":\"h6\"}]}]"
      }
    }
    

    If it helps this is the FA icon code I'm trying to insert via the RTE: <i class="fa-solid fa-binoculars"></i>

  • Huw Reddick 1770 posts 6157 karma points MVP c-trib
    1 week ago
    Huw Reddick
    0

    Have you added the font awesome CSS file to the list of CSS files used by the rte?

  • bh 413 posts 1400 karma points
    1 week ago
    bh
    0

    @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.

  • Marc Goodson 2148 posts 14352 karma points MVP 8x c-trib
    1 week ago
    Marc Goodson
    0

    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

     i[class]
    

    into your list of valid elements in appsettings?

    regards

    Marc

  • Huw Reddick 1770 posts 6157 karma points MVP c-trib
    1 week ago
    Huw Reddick
    0

    From his original post it appears to be in the list which is why I suggested adding the CSS file

  • bh 413 posts 1400 karma points
    1 week ago
    bh
    0

    @MarcGoodson thanks for your response.

    I've tried +i[class|style] and -i[class|style] and i[class|style] and i[class]. None of those worked.

  • Huw Reddick 1770 posts 6157 karma points MVP c-trib
    1 week ago
    Huw Reddick
    0

    Hi bh,

    This is what I have in my validElements +i[class|style] and it works fine

    If 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 render

  • Marc Goodson 2148 posts 14352 karma points MVP 8x c-trib
    1 week ago
    Marc Goodson
    0

    Sorry! 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

    enter image description here

    and it's completely fine with me adding an <i icon when I save and publish the page and go back, the <i element is retained.

    <p>hell world <i class="fa-solid fa-binoculars"></i></p>
    

    But if I pasted it outside of paragraph tags

    <p>hell world</p>
     <i class="fa-solid fa-binoculars"></i>
    

    Then it gets replaced with

    <p>hell world</p>
    <p>.</p>
    

    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?

  • Huw Reddick 1770 posts 6157 karma points MVP c-trib
    1 week ago
    Huw Reddick
    0

    That is it I think Marc, I get the same if added outside of a containing element.

  • bh 413 posts 1400 karma points
    1 week ago
    bh
    0

    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.

  • Huw Reddick 1770 posts 6157 karma points MVP c-trib
    1 week ago
    Huw Reddick
    0

    Not sure if this is your problem, but you appear to have a stray ] at the end of your valid elements string

  • bh 413 posts 1400 karma points
    1 week ago
    bh
    0

    @HuwReddick thanks again. I noticed that earlier and cleaned that up. Unfortunately, that didn't fix the issue.

  • Huw Reddick 1770 posts 6157 karma points MVP c-trib
    1 week ago
    Huw Reddick
    0

    Not sure what else to suggest I'm afraid.

Please Sign in or register to post replies

Write your reply to:

Draft