Insert Buttons with Stylish Icons

Contents

Overview

This article introduces how to implement buttons styled with Font Awesome (External link) icons for Kintone Apps.

Font Awesome

Font Awesome is a font and icon toolkit. It offers over 1,600 free icons that can be customized with CSS.

Prepare the App

Create the form

Create an App (External link) with any field settings. The customization introduced in this article will not be affected by any fields. Activate the App and navigate to any view. Check the location of the Filter and Create Graph icon. The customization will insert a Font Awsome icon in the same row as these icons.

Set the Libraries

JavaScript

Set the following URL into the App's JavaScript and CSS Customization settings (External link) , under the Upload JavaScript for PC option.

  • https://js.kintone.com/jquery/3.6.0/jquery.min.js
CSS

Set the following URL into the App's JavaScript and CSS Customization settings (External link) , under the Upload CSS File for PC option.

  • https://js.kintone.com/font-awesome/v4.7.0/css/font-awesome.min.css

Sample Code

Set the JavaScript file

Prepare the following JavaScript code in a text editor and navigate to the Kintone App's settings. Upload the file into the Upload JavaScript for PC option of the JavaScript and CSS Customization settings (External link) .

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

jQuery.noConflict();
(function($) {
  'use strict';
  kintone.events.on('app.record.index.show', function(e) {
    var menu = kintone.app.getHeaderMenuSpaceElement();
    var $button = $('<button class="custom-button" title="Feature"><i class="fa fa-plane"></i></button>');
    $button.click(function() {
      console.log('Button clicked!');
    });
    $(menu).append($button);
  });
})(jQuery);

Set the CSS file

Prepare the following CSS in a text editor and navigate to the Kintone App's settings. Upload the file into the Upload CSS for PC option of the JavaScript and CSS Customization settings (External link) .

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

.custom-button {
  color: #a8a8a8;
  font-size: 32px;
  display: inline-block;
  padding: 0 16px;
  height: 48px;
  border: 1px solid #e3e7e8;
  background-color: #f7f9fa;
  text-align: center;
}

.custom-button:hover {
  color: #3498db;
}
caution
Attention

Caution: The order in which JavaScript and CSS are uploaded to an app matters. In this example, ensure that the jQuery CDN is uploaded before the JavaScript file. You can change the order of uploads by clicking and dragging on the arrows for each item on the Upload JavaScript / CSS page.

Test the Code

After saving the settings and clicking on Update App, navigate to any view inside the Kintone App. A clickable icon with an airplane icon should be displayed next to the Create Graph icon.

How to specify icons

A variety of vector icons can be used by inserting an <i> tag in the location to display the icon. Specify an icon by adding the class name fa fa-[icon name]. The sample code in this article uses an airplane icon named "fa-plane".

Reference