Dashboards & Visualizations

Font awesome in Splunk Dashboard

Deera
New Member

Could you please guide me how to use font awesome in splunk dashboard tables. Kindly note i dont want to use status indicator viz.

Unicode affects dark theme.

So my requirement is to use font awesome in splunk dashboard(dark theme) tables without java script. 

Labels (1)
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Deera 

 

You can download the fontawesome package from https://fontawesome.com/ and put in to YOUR_APP/appserver/static folder. I have tried and keep this package into search app.

 

I tried with below XML to show fontawesome icons.  Here I have ponied to fontawesome/css/all.css which I have downloaded and kept into search/appserver/static. 

 

<dashboard stylesheet="fontawesome/css/all.css" theme="dark">
  <label>font awesome</label>
  <row>
    <panel>
      <html>
        <i class="fas fa-ad"/>
        <i class="fas fa-user"/> <!-- uses solid style -->
        <i class="far fa-user"/> <!-- uses regular style -->
        <i class="fal fa-user"/> <!-- uses light style -->
        <!--brand icon-->
        <i class="fab fa-github-square"/> <!-- uses brands style -->
      </html>
    </panel>
  </row>
</dashboard>

 

Just try it and you will get some idea on this.

 

Another thing, you have mentioned that you want to use icons into table (without Javascript). So I'm not sure about your requirement and what are the logic to display icons into table.  So you can try without JS also. But in case you want to use javascript and you have logic which is based on the value of the table cell then you can try below XML and JS also..

a.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {

    // Row Coloring Example with custom, client-side range interpretation

    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            // Enable this custom cell renderer for the confirm field
            return _(['value']).contains(cell.field);
        },
        render: function($td, cell) {
            // Add a class to the cell based on the returned value
            var value = parseFloat(cell.value);

            // Apply interpretation for number of
            if (cell.field === 'value') {
                if (value > 2) {
                    $td.addClass('range-cell').addClass('fas fa-ad');
                } else {
                    $td.addClass('range-cell').addClass('fab fa-github-square');
                }
            }
            // Update the cell content
            $td.text(value.toFixed()).addClass('numeric');
        }
    });

    mvc.Components.get('sampleTable').getVisualization(function(tableView) {
        tableView.addCellRenderer(new CustomRangeRenderer());
    });

});

 

 

XML:

<dashboard stylesheet="fontawesome/css/all.css" theme="dark" script="a.js">
  <label>font awesome</label>
  <row>
    <panel>
      <html>
        <i class="fas fa-ad"/>
        <i class="fas fa-user"/> <!-- uses solid style -->
        <i class="far fa-user"/> <!-- uses regular style -->
        <i class="fal fa-user"/> <!-- uses light style -->
        <!--brand icon-->
        <i class="fab fa-github-square"/> <!-- uses brands style -->
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <table id="sampleTable">
        <title>Test Table</title>
        <search>
          <query>| makeresults count=5 | eval value=1 | accum value | table value</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</dashboard>

 

I hope this will help you.

Thanks 

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

You could change the font family with CSS - I don't know if that would work with awesome though.

0 Karma

Deera
New Member

I would like to use fontawesome icons in splunk dashboard 

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...