Member Avatar for Royal_3

hi programmers in the code below i want to use font awesome in comment out put ,

storyReactionNum >= 4 ? comment = 'HOT <i class="fa fa-star" aria-hidden="true"></i>'

but the font awesome is display as text ,here is the full code 

<div class="comment-info"></div>

<script>
   var storyReactionNum = {{STORY_REACTIONS_NUM}};
   var comment;

   if ( storyReactionNum >= 2 ? comment = 'Trending <i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i>' : (
         storyReactionNum >= 6 ? comment = 'Super HOT!!!<i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i>' : (
                 storyReactionNum >= 5 ? comment = 'Extra HOT!!!<i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i>' : (
                         storyReactionNum >= 4 ? comment = 'HOT!<i class="fa fa-star" aria-hidden="true"></i>' : (
                                 storyReactionNum >= 1 ? comment = 'New!<i class="fa fa-star" aria-hidden="true"></i>' : comment = '1.0'
                        )
                )
        )
    ));

   $(".comment-info").text(comment);
</script>

am not good in javascript so can someone help me out ,just for the icon not to appear as text in code formart ,but let it display the icon
,just like it display normal in other ,thanks and regarsds

Edited by Royal_3
  • 2 Contributors
  • 2 Replies
  • 281 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by Royal_3

Dani AI

Generated

Short answer: the markup was being inserted as literal text, so the browser never parsed the <i> tag as an element. pointed this out and the OP acknowledged the fix. The root causes to check next are whether the insertion method is escaping HTML, whether Font Awesome is actually loaded, and whether the script runs after the DOM element exists.

Quick diagnostic checklist:

  • Confirm the Font Awesome stylesheet used on the page loads successfully and that the icon class names match the Font Awesome version in use (class naming changed between major versions and some installs use SVG instead of CSS icons).
  • Verify the script that sets the comment runs after the .comment-info element is present (scripts placed before the element or before DOM ready can behave unexpectedly).
  • Inspect the element with browser devtools: if the container shows literal angle-bracket text that starts with "<i", the insertion was escaped; if it contains a real element node but no visible icon, the icon CSS is missing or the wrong class is being used.
  • Check whether the value being inserted was already escaped by a server-side template — many templating engines auto-escape double-braced values; that will prevent client-side HTML from rendering.

Notes and safer alternatives: avoid building complex markup as raw HTML when the content can include user-controlled data. Prefer creating and appending an actual icon node (set class/attributes) or use a small mapping/function that returns sanitized fragments instead of deeply nested ternary expressions — it improves readability and reduces injection risk. Also include an accessibility hint (provide a text fallback or ARIA attributes) and confirm the Font Awesome version if migrating from older examples.

Recommended Answers

All 2 Replies

Member Avatar for hericles

You're passing your comment string into the .comment-info div as text. You need it to render as HTML so instead try:
$(".comment-info").html(comment);

Member Avatar for Royal_3

thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.