R Shiny & FontAwesome Icons – How to Use Them in Your Dashboards | R-bloggers

• Read original article here

If there’s one thing that can make your dashboards more intuitive to use, it’s icons. High-quality SVG icons can further explain, or sometimes replace long sections of text, and give your applications a fresh look. The best part is – you don’t have to be an expert designer to start using icons. With FontAwesome Icons, you can start adding better-looking elements to your Shiny dashboard today!

Today’s article will be short and sweet. You’ll learn how to use FontAwesome icons in R Shiny, from account registration to embedding and customizing their free icon set.

So, what is FontAwesome? Put simply, it’s one of the largest libraries of icons used by millions of designers, developers, and content creators worldwide.

Thousands of icons are completely free of charge, and you can always upgrade to their premium plans if:

There are more reasons why you might consider upgrading, but today we’ll work only with the free version.

To get started, head over to their homepage and enter your email address:

A confirmation link will immediately be sent to you and you’ll be redirected to the following page:

Take note of the attribute of the tag you see on the screen. It’s used to identify your account, and you’ll have to embed it to every R Shiny app you want to use FontAwesome icons in.

Once you’re registered, go onto the Icons tab and take a look at the endless amount of icons you have at your fingertips:

We’re now done with the setup. The question remains, how can you embed FontAwesome icons in R Shiny dashboards? Let’s cover that next.

Remember the tag from the previous section? Now it’s time to use it. Create a basic skeleton for R Shiny applications, including imports, UI, servicer, and a call to function. Inside the , add a HTML tag and copy the attribute from the website.

You should end up with something like this:

To add an icon to your R Shiny dashboard, simply add an tag with a CSS class obtained from the website itself. For example, here’s how the plain HTML looks like for the user icon:

You should somehow resemble this in R code. In Shiny, that’s done with the following code:

The complete dashboard code boils down to:

Here’s what the dashboard looks like:

It’s not technically a dashboard, since it shows a single icon and a text element – but you get the point on how to use FontAwesome icons in R.

Next, let’s see how to customize these icons.

Small black icons may not suit your dashboard perfectly. For example, maybe you’re building an app for a client with a blue logo and want the icon color to match. Or you want to make the icon bigger. There’s nothing you can’t do with some basic CSS knowledge.

In R Shiny, it’s best to separate CSS styles into a separate file in the folder. For simplicity, we’ll add styles to the existing file, which is also fine if you don’t have too many elements.

To change the size of an icon, change the style attribute. We’ve set it to on the second icon.

To change the color, change the style attribute. We’ve changed it to light blue.

CSS styles before the container are here just to display the icons inline with a bit of padding between – don’t think too much of it.

You can easily take this thing further. There are a ton of premade CSS templates for FontAwesome icons available online, but this was just enough to get you started. We encourage you to explore examples on codepen.io – it’s a great place to get your creative juices going.

Yes, using custom icons in your R Shiny dashboards is that simple. All you have to do is to include an external CSS file. Then, you’ll have access to many icon classes that look good out of the box. There’s no one stopping you from customizing icon size, color, and other elements if the default parameters don’t blend well with your theme.

Now it’s time for you to shine. As a homework assignment, use FontAwesome icons to reduce the amount of text on tabs, headings, and other elements. Feel free to use any icons that you like, as long as they make sense. Feel free to share your results with us on Twitter – @appsilon. We’d love to see what you can come up with.

The post R Shiny & FontAwesome Icons – How to Use Them in Your Dashboards appeared first on Appsilon | Enterprise R Shiny Dashboards.