Add Custom Icons for the Link Tiles and Link List Widget

Learn how to add custom icons for the Link Tiles and Link List widgets using HTML.

Employee App
Front Door Intranet

The Link Tiles and the Link List widgets give your users quick access to a varied number of information in an organized manner. With custom icons, you can give these widgets a customized touch according to the need of your organization. In this tutorial, we will walk you through how to customize icons for the Link List widget and the Link Tiles widget in your Staffbase platform with HTML.

Custom Icons

On completing this tutorial, you will be familiar with the HTML code snippets required to customize these widgets.

Using custom HTML can result in undesired formatting or styling. Use custom HTML only if you have experience working with HTML, and always double-check what your app looks like after applying your styles.

Prerequisites

  • You have added the Link List Widget or the Link Tiles Widget to a News post or Page.
  • You have the role of an administrator in the Staffbase Studio.

Customize Icons for the Link Tiles and Link List Widget

  1. In the Studio, upload an image to a news article or page.

  2. Copy the URL of the image source from the preview of the article or page

  3. In the editor of the page or news article, copy and paste the HTML snippet.

1<div data-widget-conf-secondary-column-mode="true" data-widget-conf-tile-bg-color="#bfd1db" data-widget-conf-tile-text-color="#666666" data-widget-conf-type="tiles" data-widget-conf-design="2" data-widget-type="QuickLinks" data-widget-src="internal://staffbase.content.widgets.QuickLinks">
2  <ul>
3    <li>
4      <span class="image" style="background-image: url('YOUR_IMAGE_URL');"></span>
5      <a href="https://staffbase.com" data-title="Ask the CEO" tabindex="0">Ask the CEO</a>
6    </li>
7    <li>
8      <span class="icon we-icon">N</span>
9      <a href="https://staffbase.com" data-title="Ocean updates" tabindex="0">Ocean updates</a>
10    </li>
11  <li>
12      <span class="icon we-icon">H</span>
13      <a href="https://staffbase.com" data-title="Home" tabindex="0">Home</a></li>
14  </ul>
15</div>

  1. Replace the URL of the background image with the image url you copied.

  2. Click Preview to test your HTML customizations.

  3. Save the changes.

You have customized the icons for the Link Tiles and Link List Widget in your Staffbase platform.

Additional Helpful Information