Add a custom icon and header link on your homepage

Do you want to add an icon with text to your homepage? This can be a great way to encourage people to jump to a particular category or resource or encourage awareness of specific issues or content.

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

The end-result will look something like this:

Sample icon and link

Create the snippet

1. Go to Library > Snippets.
2. Select the + Create New Snippet button.
3. Enter a Name for your snippet. The Merge Code Name is automatically calculated from the name.
4. Enter a Snippet Description. When anyone tries to insert a snippet using the editor, this description will be shown to them, so make it useful.
5. Select the Snippet Content dropdown and select Code Editor.
   
   Sample gif showing the switch to Code Editor. Hover to play.
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 Font Awesome life preserver ring icon. To change this:
   • Head to the free Font Awesome icons. 
   • Browse or search for an icon you'd like to use.
   • Select it and copy the HTML it displays for the icon.
   • Replace the HTML in row 5 with the HTML you copied from Font Awesome.
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 .hg-minimalist-theme div.homepage-callout-icon a.
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, select those reader groups using the boxes in the Restrict to Reader Groups section.
14. When you're done making adjustments, select Create.

Here's a completed snippet using the "Center" align with a newspaper icon and text "Latest Releases!" and the colors changed to a dark blue:

<div class="homepage-callout-icon">
  <!--Adjust the URL below to point to the location you want to use -->
  <a href="/docs/release-notes">
    <!--FontAwesome icon. Can be replaced with code for other FA icons -->
      <i class="fa-regular fa-newspaper"></i>
    <!--Text you want displayed below the icon-->
    <div>Latest Releases!</div>
  </a>
</div>
<style>
  /* Style for icon */
  .homepage-callout-icon i {
    max-width: 240px;
    color: #1d284f;
    font-size: 48px;
  }
  /* Style for hyperlink text */
  .hg-minimalist-theme div.homepage-callout-icon a {
    color: #1d284f;
  }
  /* Center*/
  .homepage-callout-icon {
    text-align:center;
    margin: 20px 0;
  }
</style>

Add the snippet to your homepage

1. Copy the Merge Code Value of the snippet.
2. Go to Settings > Style.
3. Below the preview pane, select Custom HTML.
4. Select Homepage from the dropdown.
5. Paste the merge code value where you'd like it to appear in your homepage. This may take some trial and error.
   • To place it below the search bar but above the category icons, enter it on a new line between the hg-article-body div and the div with the icon-cats template in it, for example, here it is in row 7:

     <div class="ko-homepage-top">			
         <h1 class="hg-article-title xcolor">[homepage("title")]</h1>
         
     
     	
     
     				
     		
     	
     
     </div>
     <div class="hg-article">
         <div class="hg-article-body">
           
             <div></div>
             <div>[homepage("body")]</div>

     Sample of how that code displays in the live knowledge base
     
   • To place it between the title and the search bar, enter it on a new line between the h1 with the homepage title merge code and the large-search template, for example, here it is in row 3:

     <div class="ko-homepage-top">
         <h1 class="hg-article-title xcolor">[homepage("title")]</h1>
       
         
     
     	
     
     				
     		
     	
     
     </div>
     <div class="hg-article">
         <div class="hg-article-body">

     Sample of how that code displays in the live knowledge base
6. Save your changes.