Add a custom icon and header link on your homepage

Recently, we've had requests for adding icons linking to announcement/update categories to the home page. This can be a great way to highlight and encourage awareness of specific issues or content. (As of the time of this writing, COVID-19 updates are our most frequently requested.)

In this example, we walk through creating a snippet that contains a div with a FontAwesome icon, some text, and a link to content in your knowledge base. You can then add that snippet to your home page to display it.

This will produce something like this:

Sample icon + link

Create the snippet

1. Go to Library > Snippets.
2. Click the Create New Snippet button.
   
3. Give your snippet a name and a Merge Code name. (Here, we use Homepage COVID-19 for the name and homepageCOVID-19 for the merge code).
4. Add a Snippet Description, like "This snippet creates a COVID-19 section for the homepage, with a life preserver icon, linked to our COVID-19 category."
5. Click the dropdown next to Snippet Content to select Code Editor.
   
6. Copy the code below and paste it into the editor window:

   <div class="covid-19">
     <!--Adjust the URL below to point to the location you want to use -->
     <a href="/help/covid-19">
       <!--FontAwesome icon. Can be replaced with code for other FA icons -->
         <i class="fa fa-life-ring" aria-hidden="true"></i>
       <!--Text you want displayed below the icon-->
       <div>COVID-19 Info</div>
     </a>
   </div>
   <style>
     /* Style for icon */
     .covid-19 i {
         max-width: 240px;
       color: #A1222F;
       font-size: 48px;
     }
     /* Style for overall div */
     .covid-19 div {
       color: #A1222F;
     }
     
     /* For next section, choose one alignment and remove/comment out the other two
     Left is used as default */
     
     /* Center*/
     /*.covid-19 {
         text-align:center;
       margin: 20px 0;
     }*/
     /* Left */
      .covid-19 {
       display: inline-block;
         text-align:center;
       margin: 20px 0;
     }
     /* Right */
     /* .covid-19 {
       display: inline-block;
         text-align:center;
       margin: 20px 0;
       float: right;
     }*/
   </style>

7. Adjust the code as needed:
   • In row 3, change the href="/help/covid-19" to reference the URL you'd like this section to point to.
   • We use a FontAwesome life preserver ring icon. You can change this to a different icon by replacing the code in Line 5 with the code for another icon.
   • Update the text you want displayed with the icon by editing Line 7.
   • In the style section, change the color and size of the icon by adjusting the styles for .covid-19 i
   • In the style section, change the color of the text font by changing the color for .covid-19 div
   • Choose one of the alignment options and delete or comment out the other two. If you copy directly from above, it will be left-aligned. But you can change the commenting and delete the alignments you don't want.
8. If you'd like the linked icon and text to be visible only to certain reader groups, check the boxes in the Restrict to Reader Groups section.
9. When you're done making adjustments, click Create.
   

Here's a completed snippet using the "Center" align, with text "COVID-19 Updates" and the colors changed to a dark blue:

Sample completed snippet using Center alignment

Add the snippet to your home page

1. Copy the Merge Code Value of the snippet.
2. Go to Settings > Style.
3. Below the preview pane, select Custom HTML.
4. Select Home Page from the dropdown.
5. Paste the merge code value where you'd like it to appear in your home page. This may take some trial and error, but we have a few suggestions:
   • For knowledge bases using search, to place the snippet below the search bar area but above the category list, add it between the hg-article-body div and the homepage body template:
     
     Which will display here, using center alignment:
     Sample center alignment, inside hg-article-body
   • For home pages with no search, add it between the hg-article-title h1 and the hg-article-body div:
     
     Which will display here, using left alignment:
     Sample left alignment, between hg-article-title and hg-article-body
6. Save your changes.