Icon before article title

Hi Marsy, 

There is easy and simple way,

Go to the section_page.hbs file.

Check the section id.

Add icon on section page like below:

For font image

{{#is section.id 123456789}} <img src="{{asset 'updatebutton50x21.png'}} "/>{{/is}}


Screenshot for the same:




For font icon

{{#is section.id 123456789}} <i class="fas-fa-pencil"></i> {{/is}}



123456789 -- Section ID
updatebutton50x21.png -- Image name 
<i class="fas-fa-pencil"></i> -- Icon name

If any confusion let me know :)

Thanks

Hello, I am trying to add icons to sections before the title name.  Do you happen to have any suggestions on coding for this?  I tried a few variations that are not working for me.

Glad to hear that it worked for you!

Ifra, you're amazing! That worked perfectly. I appreciate you taking the time to help me with this so much--you have no idea. Thank you, thank you!

Hey Ashley Boose,

Remove previous line of code and use this code snippet:

var divs= document.getElementsByClassName('article-label');
 for (var i = 0, len = divs.length; i < len; ++i) {
   if(divs[i].innerHTML.indexOf("gate_access") !== -1) {
    divs[i].innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" ><rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/><path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/></svg>';
    } else {
       divs[i].style.display = "none";
    }
}

Hey Ifra, I have added all the code as you said. I added the following to my script.js file:

$(".article-label:contains('gated_access')").html('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" ><rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/><path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/></svg>');

I added the following to my section, category and article pages in the place(s) that you specified:

<div class="article-label">{{#each labels}}{{identifier}}{{/each}}</div>

Then I added the following to the document_head.hbs file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> 

Now the lock icon IS showing up on the article where that label has been added, but the only problem I'm still having is that all the other articles that have other labels are showing the label names by the titles in the category, section and article pages as well. (See screenshots.) From what I listed above, can you tell what I could've done to make this happen?

Hey Ashley Boose

Add this script code to your script.js file at the bottom as well  (I have mentioned in my above comment):

$(".article-label:contains('gated_access')").html('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" ><rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/><path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/></svg>');


Screenshot for the same:

and make sure your document_head.hbs file has this CDN like below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>



Screenshot for the same:

If any confusion, let me know :)

Hey Ifra, thank you so much for helping me with this, I really appreciate it. I am having one issue though. I added the code as you said, but I think instead of showing the icon on the article with the specific label, it is showing the labels for each article next to the titles for any/all articles that have them. (Screenshots of section page and article below). 

Hi Ashley Boose,

If you added a "Labels" to your articles for your "Gated Access"  users I mean like this,

add the script code to the script.js file at the bottom area,

$(".article-label:contains('gate_access')").html('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" ><rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/><path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/></svg>');


Screenshot for the same:

then check the label with the given code by adding to category, section and article page same as I shared the screenshots,

Source Code

<div class="article-label">
  {{#each labels}}
    {{identifier}}
  {{/each}}
</div>

-----------------------------------------------------------------------

Screenshots For The Same-

Category Page


Output - Lock icon beside the promo article






Section Page

Output - Lock icon beside the promo article





Article Page


Output - Lock icon beside the promo article

Try this and let me know :)

Thanks

Thank you Ifra for your quick response! I understand that the lock icon will show up when article is visible to Agents and Admins only, and ours does this. However, we have created a custom segment called "Gated Access" that is visible to Agents and Admins AND a few other specific end-users that are partners of our company. We would like to be able to flag these articles as internal as well, but of course the lock icon doesn't show up for these articles. Also, there is no way to identify these articles, that I know of, in order to add the icon via Javascript or anything else. Do you have any ideas for me on this? Even if I just wanted to manually add the icon in each article title, I can't think of a way to add one that would work unless it's a symbol and even then it looks like this: 🔒.