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
Legend

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
.conf21 Now Fully Virtual!
Register for FREE Today!

We've made .conf21 totally virtual and totally FREE! Our completely online experience will run from 10/19 through 10/20 with some additional events, too!