Font awesome in Splunk Dashboard

Deera · ‎04-30-2021

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.

kamlesh_vaghela · ‎05-02-2021

@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

ITWhisperer · ‎04-30-2021

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

Deera · ‎04-30-2021

I would like to use fontawesome icons in splunk dashboard

Font awesome in Splunk Dashboard

table

Built-in Service Level Objectives Management to Bridge the Gap Between Service & ...

Get Your Exclusive Splunk Certified Cybersecurity Defense Engineer at Splunk .conf24 ...

Share Your Ideas & Meet the Lantern team at .Conf! Plus All of This Month’s New ...