DotnetNuke中2sxc抑制Font-Awesome类的技术问题咨询

Hey there, let's break down those frustrating Font Awesome + 2sxc conflicts you're hitting with your HTML module – here's what's going on and how to fix it:

Problem Recap #

First, let's lay out the specific bugs you've observed:

• FA icon tags get auto-commented: When inserting <em class="icon-featured fas fa-user"></em> via the HTML module's source editor, the tag gets automatically commented out. Removing the fas and fa-user classes fixes this, confirming the issue is tied to Font Awesome's class names.
• 2sxc module interaction causes two distinct issues:
  • If you add an HTML module with FA icons first, then add a 2sxc module, the FA icons get "compressed" (malformed or stripped).
  • If you add a 2sxc module first, then insert FA icons into an HTML module, the icon tags get commented out entirely.
• Code mangling example: Your original code:

  <p>before -<em class="icon-featured fas fa-user"></em>-after </p>
  

  Gets modified to:

  <p>before <em class="icon-featured fas fa-user"></em> --> -after</p>
  

Root Cause #

This is almost definitely due to HTML sanitization/filtering – either from your CMS (most likely DNN, since 2sxc is commonly paired with it) or the 2sxc module's own content processing. The filter is flagging Font Awesome's class names as potentially unsafe, and the order of module loading triggers different filtering rules.

Fixes to Try #

Here are actionable steps to resolve this:

1. Adjust HTML module sanitization settings
   Check your CMS's HTML module configuration – look for an option like "Allow Unsafe HTML" or tweak the editor's filter to whitelist fas and fa-* classes. For DNN specifically, navigate to the HTML module settings and adjust the "HTML Editor Provider" settings to relax filtering for Font Awesome classes.

2. Use 2sxc's native icon support
   Instead of using a separate HTML module, leverage 2sxc's built-in icon picker or insert FA icons directly in 2sxc templates. 2sxc is designed to handle Font Awesome classes properly, so this avoids the conflict entirely.

3. Wrap icons in a whitelisted container
   Sometimes wrapping the icon tag in a div with a safe, pre-approved class can bypass the sanitizer:

   <div class="custom-icon-wrapper">
     <em class="icon-featured fas fa-user"></em>
   </div>
   

4. Check 2sxc's content filtering rules
   Head to your 2sxc module's settings and look for content security options – ensure that HTML filtering isn't blocking Font Awesome classes. You may need to add fas and fa-* to the list of allowed classes.

5. Fallback: Use SVG icons directly
   If all else fails, embed the Font Awesome icon as an SVG directly in your HTML. Grab the SVG code from the Font Awesome website and insert it like this:

   <p>before -<svg class="icon-featured" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>-after </p>
   

内容的提问来源于stack exchange，提问作者Charles Mark Carroll