Add a print icon to the Glossary page

By default, the Glossary page doesn't include PDF, email, or print icons. If you'd like to add a print icon to the Glossary page, you can do so using these steps.

The heading and letters of the Glossary page in a live knowledge base. A print icon displays to the right of the Glossary page title and an arrow points to it.Add a print icon like this to your Glossary page

Create a snippet to generate the print icon

  1. Go to Library > Snippets.
  2. Select + Create New Snippet. If you're not familiar with creating snippets, refer to Creating a snippet.
  3. Enter a Snippet Name like Glossary Print.
  4. Enter a Snippet Description, like Add a print icon to the Glossary page.
  5. Select the Snippet Content dropdown and select Code Editor.
  6. Copy the code below and paste it into the code editor:
    <script>
    $(function(){
      if($('.hg-glossary-page') && $('.hg-glossary-page').length >= 1) {
        $('.page-header').append('<span class="ko-article-actions"><a href="#" class="ko-js-print" title="Print"><i class="fa fa-print fa-fw"></i></a></span>');
        };
    });
    </script>
  7. Select Create to finish creating your snippet.

Add the snippet to Settings > Style

  1. Copy the Merge Code Value of the snippet you created above.
  2. Go to Settings > Style.
  3. In the Customize HTML, CSS, and JS section, select Custom HTML.
  4. Select Body from the Select HTML section to edit dropdown.
  5. Paste your snippet merge code anywhere into the Body code editor pane (the bottom is always a good choice). For example:
    <div class="row hg-site-body slideout-new"
        [template("layout")]
      {{snippet.backToTop}}
    </div>
    <div class="row ko-site-footer text-center xsize">
        <div>Copyright © 2023 – 2024 Your Company, LLC. All rights reserved.
            <br>Made with <a href="https://www.knowledgeowl.com" target="_blank">KnowledgeOwl</a> <img class="ko-logo" src="https://dyzz9obi78pm5.cloudfront.net/app/image/id/65cbb573a7123f123624c722/n/favicon-32px.svg">
        </div>
    </div>
    {{snippet.glossaryPrint}}
  6. Be sure to Save your changes.

Once you save those changes, the print icon appears on your glossary page:

Sample Glossary page with print icon