Are you a member of the Splunk Community?
- Find Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- Font awesome in Splunk Dashboard
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark Topic
- Subscribe to Topic
- Mute Topic
- Printer Friendly Page
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Font awesome in Splunk Dashboard
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.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
You could change the font family with CSS - I don't know if that would work with awesome though.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I would like to use fontawesome icons in splunk dashboard
Can’t Make It to Boston? Stream .conf25 and Learn with Haya Husain
Splunk Lantern’s Guide to The Most Popular .conf25 Sessions
Unlock What’s Next: The Splunk Cloud Platform at .conf25
