When Avada prints the post meta it often outputs the entire "Published On: September 1, 2025" as a single text node. That makes it tricky to target only the "Published On:" text with CSS. In this short tutorial I’ll show a simple, safe, and SEO-friendly way to replace that label with a calendar icon using a tiny JavaScript snippet and a bit of CSS — no theme template changes required.

Why we don’t use CSS-only

A CSS-only approach works when the label and date are separate elements. But Avada often outputs them together inside one <span> (a single text node). CSS can’t remove part of a text node, so we use JavaScript to split and rebuild the markup, then style it with CSS.

What you’ll add

  1. Small CSS (paste into Avada → Options → Custom CSS or Appearance → Customize → Additional CSS).
  2. Small JS (paste into Avada → Options → Advanced → Space before </body> or use a custom JS plugin).

This method:

  • keeps the date as real text (good for SEO),
  • uses an inline SVG for the calendar icon (no external icon library),
  • is fast and safe.

Copy-paste ready code

CSS (Avada → Options → Custom CSS)

/* Published date with calendar icon */
.fusion-tb-published-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* SVG icon sizing and color (inherits currentColor unless overridden) */
.fusion-tb-published-date .fusion-cal-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  vertical-align: middle;
  display: inline-block;
  line-height: 1;
}

/* Date text styling */
.fusion-tb-published-date .fusion-date-text {
  line-height: 1;
}

/* Accessible visually-hidden class (for screen-readers) */
.screen-reader-only {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; /* added line */
}

JavaScript (Avada → Options → Advanced → Space before </body>)

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.fusion-tb-published-date').forEach(function(span){
    var text = span.textContent.trim();

    // Remove common prefix (case-insensitive) like "Published On:" or "Published:" etc.
    var date = text.replace(/^(Published\s*On:|Published:)\s*/i, '').trim();
    if(!date) date = text; // fallback to original

    // Optional: keep original label for screen readers
    var srLabel = 'Published on'; // change if you want localized text
    var srSpan = '<span class="screen-reader-only">'+ srLabel +'</span>';

    // Inline SVG calendar icon (uses currentColor)
    var svg = '<svg class="fusion-cal-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v12c0 1.1 .9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H5V9h14v9zM7 11h5v5H7z"/></svg>';

    // Build final markup: (screen reader label) + icon + date text
    span.innerHTML = srSpan + svg + '<span class="fusion-date-text">' + date + '</span>';
  });
});
</script>

Accessibility & localization notes

  • The code keeps the date as real text (so search engines and copy/paste still work).
  • A visually-hidden "Published on" label is added for screen readers. If you need the label in Urdu or another language, change srLabel in the JS to a translated string (for example, "شائع ہوا").
  • If your theme prints dates in a custom format or language (e.g., ۱ ستمبر ۲۰۲۵), the JS still preserves the date string as-is.

Troubleshooting

  • No change after saving — clear your WordPress and plugin cache, and disable JS/CSS minification temporarily (Avada/third-party caching can serve cached/minified files).
  • Icon not aligned — tweak .fusion-cal-icon width/height or the gap in .fusion-tb-published-date.
  • Avada markup differs — if Avada outputs the date in a different selector, inspect the markup and update the JS selector .fusion-tb-published-date to match your HTML.
  • If you prefer Font Awesome — replace the svg string in the JS with <i class="fas fa-calendar-alt" aria-hidden="true"></i> if Font Awesome is loaded.