Add a custom icon and header link on your homepage

Sometimes we have requests to add some kind of icon and text to the homepage to encourage people to jump to a particular category or resource. This can be a great way to highlight and encourage awareness of specific issues or content.

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 Breaking News for the name and breakingNews for the merge code).
4. Add a Snippet Description, like "This snippet creates a Breaking News section for the homepage, with a life preserver icon, linked to our Breaking News 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="homepage-callout-icon">
     <!--Adjust the URL below to point to the location you want to use -->
     <a href="/help/breaking-news">
       <!--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>Breaking News!</div>
     </a>
   </div>
   <style>
     /* Style for icon */
     .homepage-callout-icon i {
       max-width: 240px;
       color: #A1222F;
       font-size: 48px;
     }
     /* Style for hyperlink text */
     .hg-minimalist-theme div.homepage-callout-icon a {
       color: #A1222F;
     }
     
     /* For next section, choose one alignment and remove/comment out the other two
     Left is used as default */
     
     /* Center*/
     /*.homepage-callout-icon {
       text-align:center;
       margin: 20px 0;
     }*/
     /* Left */
     .homepage-callout-icon {
       display: inline-block;
       text-align:center;
       margin: 20px 0;
     }
     /* Right */
     /* .homepage-callout-icon {
       display: inline-block;
       text-align:center;
       margin: 20px 0;
       float: right;
     }*/
   </style>

7. In row 3, change the href="/help/breaking-news" to reference the URL you'd like this section to point to. If it's within your knowledge base, you only need to use the relative URL (/help/, /home/, or /docs/ with the URL of the specific article or category).
8. In row 5: we use a FontAwesome life preserver ring icon. You can change this:
   • Head to the free FontAwesome icons. 
   • Browse or search for an icon you'd like to use.
   • Click on it and copy the HTML it displays for the icon.
   • Replace the HTML in line 5 with the HTML you copied from FontAwesome.
9. In Row 7: Update the text you want displayed with the icon by editing this line.
10. In Row 14, change the color and size of the icon by adjusting the styles for .homepage-callout-icon i
11. In Row 19, change the color of the text font by changing the color for div.covid-19 div
12. Rows 22-42: Choose one of the alignment options and delete or comment out the other two. In our sample, we have used the Left alignment and commented out the other two.But you can change the commenting and delete the alignments you don't want.
13. Optional: 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.
14. When you're done making adjustments, click Create.

Here's a completed snippet using the "Center" align with a newspaper icon and text "Breaking News" 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 panels, add it immediately after the hg-article-body div:
     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.