In this post I show how to add novel symbols, from ambulances through to arrows, to Displayr documents. These symbols are part of the Font Awesome font.

Displayr's got quite a few different features for adding icons and other images. You can insert shapes, write code to import images from web addresses, and create images as pictographs. And, there is one more approach, which is to use icons that come in fonts.

As the name suggestions, Font Awesome is an awesome font. It contains more than 1,000 great icons which can be colored and resized in Displayr. For example, here is one of its ambulance icons and an arrow.

Choosing your font awesome icon

To choose an icon, go to Font Awesome's gallery of free icons and search for the icon you like and click on it. The screenshot below shows the ambulance, for example. Then, copy the HTML at the bottom-left (in this case it is <i class="fas fa-ambulance"></i>).

 

Creating the icon in Displayr

In Displayr:

  • Press Insert > R Output (Analysis), which is in the ribbon at the top of the screen.
  • Copy and paste the R code below into the R CODE box in the Object Inspector (on the right of the screen).
  • Change the first line of code so it uses the appropriate HTML.
  • Press  CALCULATE  and you should have a very small black icon. If you have left fas fa-ambulance in the code, it will look like this:
 
icon <- '<i class="fas fa-ambulance"></i>'
fontawesome_css <- '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">'
rhtmlMetro::Box(text = paste(fontawesome_css, icon), text.as.html = TRUE)

Coloring and sizing

With a little bit more work we can control the font and color. The code below produces the blue ambulance on the left. The following code creates an even bigger ambulance, with a more elegant shade of blue. In each of these example, the only things that are changing are the font color and font size, which are in the first line of code.

icon <- '<font color="blue" style="font-size: 50pt"><i class="fas fa-ambulance"></i></font>'
fontawesome_css <- '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">'
rhtmlMetro::Box(text = paste(fontawesome_css, icon), text.as.html = TRUE)

 
icon <- '<font color="#4F8AC2" style="font-size: 100pt"><i class="fas fa-ambulance"></i></font>'
fontawesome_css <- '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">'
rhtmlMetro::Box(text = paste(fontawesome_css, icon), text.as.html = TRUE)

The real benefit of Font Awesome isn't just creating pretty pictures. It is the ability to use code to modify the images that appear. I discuss this in Using Code to Automatically Update Text and Icons in Dashboards.

You can try this yourself in Displayr, or check out more of our blog!