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
- Go to Library > Snippets.
- Click the Create New Snippet button.
- 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).
- 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."
- Click the dropdown next to Snippet Content to select Code Editor.
- 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>
- 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.
- 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.
- 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
- Copy the Merge Code Value of the snippet.
- Go to Settings > Style.
- Below the preview pane, select Custom HTML.
- Select Home Page from the dropdown.
- 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
- 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:
- Save your changes.