Ionic结合FontAwesome堆叠自定义图标适配问题求助

Got it, let's tackle that responsive stacked icon problem you're facing. The issue with your current CSS is that fixed relative units like -0.25em or -0.8em don't scale proportionally when the icon's size changes. Here's a better approach that works across all icon sizes:

Step 1: Restructure CSS for Relative Positioning #

Instead of positioning pseudo-elements relative to the text flow, turn the parent ion-icon into a positioning container. Then use absolute positioning with percentage values for the stacked icons—this ensures all offsets and sizes scale with the icon's overall dimensions.

Updated CSS:

/* Make the ion-icon a positioning context for pseudo-elements */
.ion-md-notice, .ion-ios-notice {
  position: relative;
}

/* Base icon (the larger background icon) */
.ion-md-notice:before, .ion-ios-notice:before { 
    font-family: "FontAwesome" !important; 
    content: '\f133' !important; 
    color: #d81717;
    /* Fill the entire ion-icon container */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Center the icon perfectly inside its container */
    display: flex;
    align-items: center;
    justify-content: center;
} 

/* Stacked icon (the smaller overlay icon) */
.ion-md-notice:after, .ion-ios-notice:after { 
    font-family: "FontAwesome" !important; 
    content: '\f05e' !important; 
    /* Scale with parent icon using percentage font-size */
    font-size: 50%;
    color: #d81717;
    /* Keep position consistent with percentage offsets */
    position: absolute;
    top: 70%;
    left: 70%;
    /* Center the small icon within its own space */
    display: flex;
    align-items: center;
    justify-content: center;
}

Why This Works #

• Relative Parent Container: Setting position: relative on the ion-icon ensures pseudo-elements are anchored to the icon's boundaries, not the surrounding text.
• Proportional Sizing: Using font-size: 50% for the stacked icon means it always stays half the size of the base icon, no matter how big or small the parent ion-icon gets.
• Consistent Placement: Percentage values for top and left keep the small icon in the same relative spot (like the bottom-right corner) regardless of the icon's overall size.

Quick Tweaks for Customization #

• Adjust the font-size percentage on the :after pseudo-element to make the stacked icon bigger or smaller (e.g., 40% for tiny, 60% for larger).
• Modify top and left percentages to reposition the overlay (e.g., top: 10%; left: 80% for a top-right placement).

Test It Across Sizes #

Try adding different font-size values to your ion-icon to verify it works everywhere:

<ion-icon name="notice" style="font-size: 24px;"></ion-icon>
<ion-icon name="notice" style="font-size: 36px;"></ion-icon>
<ion-icon name="notice" style="font-size: 48px;"></ion-icon>

All instances will render stacked icons proportionally without breaking alignment.

内容的提问来源于stack exchange，提问作者Nicolas