Displaying HTML Icons in a Dashboard

Overview

You have a few options when customizing the look of a dashboard. One of those options is using HTML icons to add another level of visual data representation.

The two main sources of icons you can use in Unqork include UTF-8 Dingbats and Font Awesome. Let's look at the details of each and how you can add them to a dashboard.

What You'll Learn

In this article, you'll learn how to:

UTF-8 Dingbats Icons

You can use icons from UTF-8 Dingbats in Unqork right out of the box. No additional library is needed. To refer to an icon, use the hex or decimal code for the icon preceded by an amersand. For example, the hex code for a white checkmark in a green box is #2705. To show this in Unqork, use &#2705. The decimal code for the same icon is #9989. So, using &#9989 in Unqork achieves the same result. Anywhere this code appears in your ViewGrid results in the icon displaying in your dashboard:

You can find a full list of UTF-8 Dingbats icons here: https://www.w3schools.com/charsets/ref_utf_dingbats.asp.

Font Awesome

With Unqork, you have access to Font Awesome's Pro library of icons. Each icon in this library has its own name. All you have to do is find the icon you want to use in Font Awesome's library. Then, you'll take the line of HTML associated with it and use that in your ViewGrid.

When you select an icon from Font Awesome's library, you're taken to the icon's detail page. There, you'll see a line of HTML that looks something like this:

<i class="fas fa-heart"></i>

Depending on which icon you select, the name varies. Here, the name of the Font Awesome icon is fas fa-heart. Entering this into a ViewGrid displays a solid heart icon:

You can view Font Awesome's Pro library and all available icons here: https://fontawesome.com/v5.15/icons?d=gallery&p=2&q=heart&m=pro.

Since these icons use a regular HTML <i> tag, you can customize them even further by adding <span> tags. For example, if you want to make the icon red and twice as large, here's what your HTML looks like:

<span style="color:red;font-size:28px;"><i class="fas fa-heart"></i></span>

And here's what you'll see in your dashboard:

Icons are treated the same as text in HTML. So, don't worry about adding styles for things like height and width like you would for images. Instead, only use styling tools you'd also use on text and fonts.